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.
357 lines
6.0 KiB
357 lines
6.0 KiB
.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; |
|
font-family: "microsoft yahei", Helvetica, arial, sans-serif; |
|
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: 14px; |
|
border-radius: 5px; |
|
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(800px); |
|
transform: translateY(800px) |
|
} |
|
100% { |
|
opacity: 1; |
|
-webkit-transform: translateY(0); |
|
transform: translateY(0) |
|
} |
|
} |
|
|
|
@keyframes layui-m-anim-up { |
|
0% { |
|
opacity: 0; |
|
-webkit-transform: translateY(800px); |
|
transform: translateY(800px) |
|
} |
|
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: 90%; |
|
max-width: 640px |
|
} |
|
|
|
.layui-m-layer1 .layui-m-layerchild { |
|
border: none; |
|
border-radius: 0 |
|
} |
|
|
|
.layui-m-layer2 .layui-m-layerchild { |
|
width: auto; |
|
max-width: 260px; |
|
min-width: 40px; |
|
border: none; |
|
background: 0 0; |
|
box-shadow: none; |
|
color: #fff |
|
} |
|
|
|
.layui-m-layerchild h3 { |
|
padding: 0 10px; |
|
height: 60px; |
|
line-height: 60px; |
|
font-size: 16px; |
|
font-weight: 400; |
|
border-radius: 5px 5px 0 0; |
|
text-align: center |
|
} |
|
|
|
.layui-m-layerbtn span, |
|
.layui-m-layerchild h3 { |
|
text-overflow: ellipsis; |
|
overflow: hidden; |
|
white-space: nowrap |
|
} |
|
|
|
.layui-m-layercont { |
|
padding: 50px 30px; |
|
line-height: 22px; |
|
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: 25px; |
|
height: 25px; |
|
margin-left: 8px; |
|
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 5px 5px |
|
} |
|
|
|
.layui-m-layer2 .layui-m-layercont p { |
|
margin-top: 20px |
|
} |
|
|
|
@-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: 22px; |
|
padding-top: 7px; |
|
margin-bottom: 20px; |
|
font-size: 14px |
|
} |
|
|
|
.layui-m-layerbtn { |
|
display: box; |
|
display: -moz-box; |
|
display: -webkit-box; |
|
width: 100%; |
|
height: 50px; |
|
line-height: 50px; |
|
font-size: 0; |
|
border-top: 1px solid #D0D0D0; |
|
background-color: #F2F2F2 |
|
} |
|
|
|
.layui-m-layerbtn span { |
|
display: block; |
|
-moz-box-flex: 1; |
|
box-flex: 1; |
|
-webkit-box-flex: 1; |
|
font-size: 14px; |
|
cursor: pointer |
|
} |
|
|
|
.layui-m-layerbtn span[yes] { |
|
color: #fd482c |
|
} |
|
|
|
.layui-m-layerbtn span[no] { |
|
border-right: 1px solid #1F2126; |
|
border-radius: 0 0 0 5px |
|
} |
|
|
|
.layui-m-layerbtn span:active { |
|
background-color: #F6F6F6 |
|
} |
|
|
|
.layui-m-layerend { |
|
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 |
|
} |
|
|
|
.layui-m-layerend::after, |
|
.layui-m-layerend::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 |
|
} |
|
|
|
.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: 10px; |
|
background: 0 0 |
|
} |
|
|
|
.layui-m-layer-footer .layui-m-layercont { |
|
font-size: 1.1em; |
|
padding: 15px; |
|
border-radius: 5px 5px 0 0; |
|
background-color: #c2b483; |
|
color: #1F2126; |
|
} |
|
|
|
.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: #1F2126 |
|
} |
|
|
|
.layui-m-layer-footer .layui-m-layerbtn span[no] { |
|
color: #40AFFE; |
|
border-top: 1px solid #1F2126; |
|
border-radius: 0 0 5px 5px |
|
} |
|
|
|
.layui-m-layer-footer .layui-m-layerbtn span[yes] { |
|
margin-top: 10px; |
|
border-radius: 5px |
|
} |
|
|
|
body .layui-m-layer .layui-m-layer-msg { |
|
width: auto; |
|
max-width: 90%; |
|
margin: 0 auto; |
|
bottom: -150px; |
|
background-color: rgba(0, 0, 0, .7); |
|
color: #c2b483 |
|
} |
|
|
|
.layui-m-layer-msg .layui-m-layercont { |
|
padding: 10px 20px |
|
} |