You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

256 lines
4.2 KiB

.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 {
display: table-cell;
vertical-align: middle;
text-align: center
}
.layermchild {
text-align: left;
background-color: #fff;
font-size: 14px;
border-radius: .4rem;
overflow: hidden;
box-shadow: 0 0 8px rgba(0, 0, 0, .1);
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: 60%;
}
.layermbox0 .layermchild .layermcont{padding: 1.3rem; box-sizing: border-box; line-height: 2rem;}
.layermbox1 .layermchild {
border: none;
border-radius: 0
}
.layermbox2 .layermchild {
width: auto;
max-width: 260px;
min-width: 40px;
border: none;
background: 0 0;
box-shadow: none;
color: #fff
}
.layermchild h3 {
padding: 0 45px 0 10px;
height: 50px;
line-height: 50px;
font-size: 16px;
font-weight: 400;
border-radius: 3px 3px 0 0;
border-bottom: 1px solid #EBEBEB
}
.layermbtn span,
.layermchild h3 {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap
}
.layermcont {
padding: 1rem 1.2rem;
font-size: 1.6rem;
line-height: 22px;
text-align: center
}
.layermbox1 .layermcont {
padding: 0;
text-align: left
}
.layermbox2 .layermcont {
text-align: center;
padding: 0;
line-height: 0
}
.layermbox2 .layermcont i {
width: 25px;
height: 25px;
margin-left: 8px;
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: 22px;
padding-top: 7px;
margin-bottom: 20px;
font-size: 14px
}
.layermbtn {
position: relative;
height: 3.6rem;
line-height: 3.6rem;
font-size: 0;
text-align: center;
border-top: 1px solid #EBEBEB
}
.layermbtn span {
width: 50%;
text-align: center;
font-size: 1.4rem;
cursor: pointer;
border-radius: 0 3px 0 0
}
.layermbtn span:first-of-type {
color:#777;
height:3.6rem;
background-color: #fff;
border-radius: 0 0 0 3px
}
.layermbtn span:last-of-type{
color:#EC5151;
}
.layermbtn:before {
content: '\20';
position: absolute;
width: 1px;
left: 50%;
top: 0;
bottom:0;
background-color: #EBEBEB
}
.layermend {
position: absolute;
right: 7px;
top: 10px;
width: 30px;
height: 30px;
border: 0;
font-weight: 400;
background: 0 0;
cursor: pointer;
-webkit-appearance: none;
font-size: 30px
}
.layermend::after,
.layermend::before {
position: absolute;
left: 5px;
top: 15px;
content: '';
width: 18px;
height: 1px;
background-color: #999;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
border-radius: 3px
}
.layermend::after {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg)
}