Inicio Explorar Axuda
Rexistro Iniciar sesión
zhengwentao
/
game-box
1
0
Fork 0
Ficheiros Incidencias 0 Pull Requests 0 Wiki
Rama: master
Ramas Etiquetas
game-box
/
public
/
common
/
js
/
package
/
mobile
/
need
/
layer.css

layer.css 5.8 KB
Permalink Histórico Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687 
  1. 
    2. 

  2. /* 
    3. 

  3.   layer mobile
    4. 

  4. */
    5. 

  5. 

  6. .layui-m-layer{position:relative; z-index: 19891014;}
    7. 

  7. .layui-m-layer *{-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;}
    8. 

  8. .layui-m-layershade,
    9. 

  9. .layui-m-layermain{position:fixed; left:0; top:0; width:100%; height:100%;}
    10. 

  10. .layui-m-layershade{background-color:rgba(0,0,0, .7); pointer-events:auto;}
    11. 

  11. .layui-m-layermain{display:table; font-family: Helvetica, arial, sans-serif; pointer-events: none;}
    12. 

  12. .layui-m-layermain .layui-m-layersection{display:table-cell; vertical-align:middle; text-align:center;}
    13. 

  13. .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, 0.1);  pointer-events:auto;  -webkit-overflow-scrolling: touch;}
    14. 

  14. .layui-m-layerchild{-webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: .2s; animation-duration: .2s;}
    15. 

  15. 

  16. 

  17. /* 弹出动画 */
    18. 

  18. @-webkit-keyframes layui-m-anim-scale { /* 默认 */
    19. 

  19. 	0% {opacity: 0; -webkit-transform: scale(.5); transform: scale(.5)}
    20. 

  20. 	100% {opacity: 1; -webkit-transform: scale(1); transform: scale(1)}
    21. 

  21. }
    22. 

  22. @keyframes layui-m-anim-scale { /* 默认 */
    23. 

  23. 	0% {opacity: 0; -webkit-transform: scale(.5); transform: scale(.5)}
    24. 

  24. 	100% {opacity: 1; -webkit-transform: scale(1); transform: scale(1)}
    25. 

  25. }
    26. 

  26. .layui-m-anim-scale{animation-name:  layui-m-anim-scale; -webkit-animation-name:  layui-m-anim-scale;}
    27. 

  27. 

  28. @-webkit-keyframes layui-m-anim-up{
    29. 

  29.   0%{opacity: 0; -webkit-transform: translateY(800px); transform: translateY(800px)}
    30. 

  30.   100%{opacity: 1; -webkit-transform: translateY(0); transform: translateY(0)}
    31. 

  31. }
    32. 

  32. @keyframes layui-m-anim-up{
    33. 

  33.   0%{opacity: 0; -webkit-transform: translateY(800px); transform: translateY(800px)}
    34. 

  34.   100%{opacity: 1; -webkit-transform: translateY(0); transform: translateY(0)}
    35. 

  35. }
    36. 

  36. .layui-m-anim-up{-webkit-animation-name: layui-m-anim-up;animation-name: layui-m-anim-up}
    37. 

  37. 

  38. 

  39. .layui-m-layer0 .layui-m-layerchild{width: 90%; max-width: 640px;}
    40. 

  40. .layui-m-layer1 .layui-m-layerchild{border:none; border-radius:0;}
    41. 

  41. .layui-m-layer2 .layui-m-layerchild{width:auto; max-width:260px; min-width:40px; border:none; background: none; box-shadow: none; color:#fff;}
    42. 

  42. .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;}
    43. 

  43. .layui-m-layerchild h3,
    44. 

  44. .layui-m-layerbtn span{ text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
    45. 

  45. .layui-m-layercont{padding: 50px 30px; line-height: 22px; text-align:center;}
    46. 

  46. .layui-m-layer1 .layui-m-layercont{padding:0; text-align:left;}
    47. 

  47. .layui-m-layer2 .layui-m-layercont{text-align:center; padding: 0; line-height: 0;}
    48. 

  48. .layui-m-layer2 .layui-m-layercont i{width:25px; height:25px; margin-left:8px; display:inline-block; background-color:#fff; border-radius:100%;}
    49. 

  49. .layui-m-layer2 .layui-m-layercont p{margin-top: 20px;}
    50. 

  50. 

  51. /* loading */
    52. 

  52. @-webkit-keyframes layui-m-anim-loading{
    53. 

  53.     0%,80%,100%{transform:scale(0); -webkit-transform:scale(0)}
    54. 

  54.     40%{transform:scale(1); -webkit-transform:scale(1)}
    55. 

  55. }
    56. 

  56. @keyframes layui-m-anim-loading{
    57. 

  57.     0%,80%,100%{transform:scale(0); -webkit-transform:scale(0)}
    58. 

  58.     40%{transform:scale(1); -webkit-transform:scale(1)}
    59. 

  59. }
    60. 

  60. .layui-m-layer2 .layui-m-layercont i{-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;}
    61. 

  61. 

  62. .layui-m-layer2 .layui-m-layercont i:first-child{margin-left:0; -webkit-animation-delay: -.32s; animation-delay: -.32s;}
    63. 

  63. .layui-m-layer2 .layui-m-layercont i.layui-m-layerload{-webkit-animation-delay: -.16s; animation-delay: -.16s;}
    64. 

  64. .layui-m-layer2 .layui-m-layercont>div{line-height:22px; padding-top:7px; margin-bottom:20px; font-size: 14px;}
    65. 

  65. .layui-m-layerbtn{display: box; display: -moz-box; display: -webkit-box; width: 100%; position:relative; height: 50px; line-height: 50px; font-size: 0; text-align:center;  border-top:1px solid #D0D0D0; background-color: #F2F2F2; border-radius: 0 0 5px 5px;}
    66. 

  66. .layui-m-layerbtn span{position:relative; display: block; -moz-box-flex: 1; box-flex: 1; -webkit-box-flex: 1;  text-align:center; font-size:14px; border-radius: 0 0 5px 5px; cursor:pointer;}
    67. 

  67. .layui-m-layerbtn span[yes]{color: #40AFFE;}
    68. 

  68. .layui-m-layerbtn span[no]{border-right: 1px solid #D0D0D0; border-radius: 0 0 0 5px;}
    69. 

  69. .layui-m-layerbtn span:active{background-color: #F6F6F6;}
    70. 

  70. .layui-m-layerend{position:absolute; right:7px; top:10px; width:30px; height:30px; border: 0; font-weight:400; background: transparent; cursor: pointer; -webkit-appearance: none; font-size:30px;}
    71. 

  71. .layui-m-layerend::before, .layui-m-layerend::after{position:absolute; left:5px; top:15px; content:''; width:18px; height:1px; background-color:#999; transform:rotate(45deg); -webkit-transform:rotate(45deg); border-radius: 3px;}
    72. 

  72. .layui-m-layerend::after{transform:rotate(-45deg);  -webkit-transform:rotate(-45deg);}
    73. 

  73. 

  74. /* 底部对话框风格 */
    75. 

  75. 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: none;}
    76. 

  76. .layui-m-layer-footer .layui-m-layercont{padding: 20px; border-radius: 5px 5px 0 0; background-color: rgba(255,255,255,.8);}
    77. 

  77. .layui-m-layer-footer .layui-m-layerbtn{display: block; height: auto; background: none; border-top: none;}
    78. 

  78. .layui-m-layer-footer .layui-m-layerbtn span{background-color: rgba(255,255,255,.8);}
    79. 

  79. .layui-m-layer-footer .layui-m-layerbtn span[no]{color: #FD482C; border-top: 1px solid #c2c2c2; border-radius: 0 0 5px 5px;}
    80. 

  80. .layui-m-layer-footer .layui-m-layerbtn span[yes]{margin-top: 10px; border-radius: 5px;}
    81. 

  81. 

  82. /* 通用提示 */
    83. 

  83. 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: #fff;}
    84. 

  84. .layui-m-layer-msg .layui-m-layercont{padding: 10px 20px;}
    85. 

  85. 

  86. 

  87.