설명 없음
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.

layer.css 6.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370
  1. .layui-m-layer {
  2. position: relative;
  3. z-index: 19891014
  4. }
  5. .layui-m-layer * {
  6. -webkit-box-sizing: content-box;
  7. -moz-box-sizing: content-box;
  8. box-sizing: content-box
  9. }
  10. .layui-m-layermain,
  11. .layui-m-layershade {
  12. position: fixed;
  13. left: 0;
  14. top: 0;
  15. width: 100%;
  16. height: 100%
  17. }
  18. .layui-m-layershade {
  19. background-color: rgba(0, 0, 0, .7);
  20. pointer-events: auto
  21. }
  22. .layui-m-layermain {
  23. display: table;
  24. font-family: Helvetica, arial, sans-serif;
  25. pointer-events: none
  26. }
  27. .layui-m-layermain .layui-m-layersection {
  28. display: table-cell;
  29. vertical-align: middle;
  30. text-align: center
  31. }
  32. .layui-m-layerchild {
  33. position: relative;
  34. display: inline-block;
  35. text-align: left;
  36. background-color: #fff;
  37. font-size: 14px;
  38. border-radius: 5px;
  39. box-shadow: 0 0 8px rgba(0, 0, 0, .1);
  40. pointer-events: auto;
  41. -webkit-overflow-scrolling: touch;
  42. -webkit-animation-fill-mode: both;
  43. animation-fill-mode: both;
  44. -webkit-animation-duration: .2s;
  45. animation-duration: .2s
  46. }
  47. @-webkit-keyframes layui-m-anim-scale {
  48. 0% {
  49. opacity: 0;
  50. -webkit-transform: scale(.5);
  51. transform: scale(.5)
  52. }
  53. 100% {
  54. opacity: 1;
  55. -webkit-transform: scale(1);
  56. transform: scale(1)
  57. }
  58. }
  59. @keyframes layui-m-anim-scale {
  60. 0% {
  61. opacity: 0;
  62. -webkit-transform: scale(.5);
  63. transform: scale(.5)
  64. }
  65. 100% {
  66. opacity: 1;
  67. -webkit-transform: scale(1);
  68. transform: scale(1)
  69. }
  70. }
  71. .layui-m-anim-scale {
  72. animation-name: layui-m-anim-scale;
  73. -webkit-animation-name: layui-m-anim-scale
  74. }
  75. @-webkit-keyframes layui-m-anim-up {
  76. 0% {
  77. opacity: 0;
  78. -webkit-transform: translateY(800px);
  79. transform: translateY(800px)
  80. }
  81. 100% {
  82. opacity: 1;
  83. -webkit-transform: translateY(0);
  84. transform: translateY(0)
  85. }
  86. }
  87. @keyframes layui-m-anim-up {
  88. 0% {
  89. opacity: 0;
  90. -webkit-transform: translateY(800px);
  91. transform: translateY(800px)
  92. }
  93. 100% {
  94. opacity: 1;
  95. -webkit-transform: translateY(0);
  96. transform: translateY(0)
  97. }
  98. }
  99. .layui-m-anim-up {
  100. -webkit-animation-name: layui-m-anim-up;
  101. animation-name: layui-m-anim-up
  102. }
  103. .layui-m-layer0 .layui-m-layerchild {
  104. width: 90%;
  105. max-width: 640px
  106. }
  107. .layui-m-layer1 .layui-m-layerchild {
  108. border: none;
  109. border-radius: 0
  110. }
  111. .layui-m-layer2 .layui-m-layerchild {
  112. width: auto;
  113. max-width: 260px;
  114. min-width: 40px;
  115. border: none;
  116. background: 0 0;
  117. box-shadow: none;
  118. color: #fff
  119. }
  120. .layui-m-layerchild h3 {
  121. text-align: center;
  122. padding: 0 45px;
  123. height: 50px;
  124. line-height: 50px;
  125. border-bottom: 1px solid #EBEBEB;
  126. }
  127. .layui-m-layerbtn span,
  128. .layui-m-layerchild h3 {
  129. text-overflow: ellipsis;
  130. overflow: hidden;
  131. white-space: nowrap
  132. }
  133. .layui-m-layercont {
  134. padding: 20px 15px;
  135. line-height: 22px;
  136. }
  137. .layui-m-layercont textarea {
  138. padding: 0 5px;
  139. border-color: #e9e9e9;
  140. box-sizing: border-box;
  141. }
  142. .layui-m-layercont input {
  143. padding: 0 5px;
  144. border: 1px solid #EBEBEB;
  145. box-sizing: border-box;
  146. }
  147. .layui-m-layer1 .layui-m-layercont {
  148. padding: 0;
  149. text-align: left
  150. }
  151. .layui-m-layer2 .layui-m-layercont {
  152. text-align: center;
  153. padding: 0;
  154. line-height: 0
  155. }
  156. .layui-m-layer2 .layui-m-layercont i {
  157. width: 25px;
  158. height: 25px;
  159. margin-left: 8px;
  160. display: inline-block;
  161. background-color: #fff;
  162. border-radius: 100%;
  163. -webkit-animation: layui-m-anim-loading 1.4s infinite ease-in-out;
  164. animation: layui-m-anim-loading 1.4s infinite ease-in-out;
  165. -webkit-animation-fill-mode: both;
  166. animation-fill-mode: both
  167. }
  168. .layui-m-layerbtn,
  169. .layui-m-layerbtn span {
  170. position: relative;
  171. text-align: center;
  172. border-radius: 0 0 5px 5px
  173. }
  174. .layui-m-layer2 .layui-m-layercont p {
  175. margin-top: 20px
  176. }
  177. @-webkit-keyframes layui-m-anim-loading {
  178. 0%,
  179. 100%,
  180. 80% {
  181. transform: scale(0);
  182. -webkit-transform: scale(0)
  183. }
  184. 40% {
  185. transform: scale(1);
  186. -webkit-transform: scale(1)
  187. }
  188. }
  189. @keyframes layui-m-anim-loading {
  190. 0%,
  191. 100%,
  192. 80% {
  193. transform: scale(0);
  194. -webkit-transform: scale(0)
  195. }
  196. 40% {
  197. transform: scale(1);
  198. -webkit-transform: scale(1)
  199. }
  200. }
  201. .layui-m-layer2 .layui-m-layercont i:first-child {
  202. margin-left: 0;
  203. -webkit-animation-delay: -.32s;
  204. animation-delay: -.32s
  205. }
  206. .layui-m-layer2 .layui-m-layercont i.layui-m-layerload {
  207. -webkit-animation-delay: -.16s;
  208. animation-delay: -.16s
  209. }
  210. .layui-m-layer2 .layui-m-layercont>div {
  211. line-height: 22px;
  212. padding-top: 7px;
  213. margin-bottom: 20px;
  214. font-size: 14px
  215. }
  216. .layui-m-layerbtn {
  217. display: box;
  218. display: -moz-box;
  219. display: -webkit-box;
  220. width: 100%;
  221. height: 50px;
  222. line-height: 50px;
  223. font-size: 0;
  224. border-top: 1px solid #e9e9e9;
  225. }
  226. .layui-m-layerbtn span {
  227. display: block;
  228. -moz-box-flex: 1;
  229. box-flex: 1;
  230. -webkit-box-flex: 1;
  231. font-size: 14px;
  232. cursor: pointer
  233. }
  234. .layui-m-layerbtn span[yes] {
  235. color: #ff6f06;
  236. }
  237. .layui-m-layerbtn span[no] {
  238. border-right: 1px solid #e9e9e9;
  239. border-radius: 0 0 0 5px
  240. }
  241. .layui-m-layerbtn span:active {
  242. background-color: #F6F6F6
  243. }
  244. .layui-m-layerend {
  245. position: absolute;
  246. right: 7px;
  247. top: 10px;
  248. width: 30px;
  249. height: 30px;
  250. border: 0;
  251. font-weight: 400;
  252. background: 0 0;
  253. cursor: pointer;
  254. -webkit-appearance: none;
  255. font-size: 30px
  256. }
  257. .layui-m-layerend::after,
  258. .layui-m-layerend::before {
  259. position: absolute;
  260. left: 5px;
  261. top: 15px;
  262. content: '';
  263. width: 18px;
  264. height: 1px;
  265. background-color: #999;
  266. transform: rotate(45deg);
  267. -webkit-transform: rotate(45deg);
  268. border-radius: 3px
  269. }
  270. .layui-m-layerend::after {
  271. transform: rotate(-45deg);
  272. -webkit-transform: rotate(-45deg)
  273. }
  274. body .layui-m-layer .layui-m-layer-footer {
  275. position: fixed;
  276. width: 95%;
  277. max-width: 100%;
  278. margin: 0 auto;
  279. left: 0;
  280. right: 0;
  281. bottom: 10px;
  282. background: 0 0
  283. }
  284. .layui-m-layer-footer .layui-m-layercont {
  285. padding: 20px;
  286. border-radius: 5px 5px 0 0;
  287. background-color: rgba(255, 255, 255, .8)
  288. }
  289. .layui-m-layer-footer .layui-m-layerbtn {
  290. display: block;
  291. height: auto;
  292. background: 0 0;
  293. border-top: none
  294. }
  295. .layui-m-layer-footer .layui-m-layerbtn span {
  296. background-color: rgba(255, 255, 255, .8)
  297. }
  298. .layui-m-layer-footer .layui-m-layerbtn span[no] {
  299. color: #FD482C;
  300. border-top: 1px solid #c2c2c2;
  301. border-radius: 0 0 5px 5px
  302. }
  303. .layui-m-layer-footer .layui-m-layerbtn span[yes] {
  304. margin-top: 10px;
  305. border-radius: 5px
  306. }
  307. body .layui-m-layer .layui-m-layer-msg {
  308. width: auto;
  309. max-width: 90%;
  310. margin: 0 auto;
  311. bottom: -150px;
  312. background-color: rgba(0, 0, 0, .7);
  313. color: #fff
  314. }
  315. .layui-m-layer-msg .layui-m-layercont {
  316. padding: 10px 20px
  317. }