Home Explore Help
Register Sign In
shenhaiqing
/
chat2023_com
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: d2121f4be2
Branches Tags
chat2023_com
/
public
/
static
/
css
/
wcPop.css

wcPop.css 8.8 KB
History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160 
  1. /**
    2. 

  2. 	wcPop.css v1.0 styleSheet（2018/03/30）
    3. 

  3. 	write by 【px】
    4. 

  4. */
    5. 

  5. .popui__modal-panel{position: relative;}
    6. 

  6. .popui__modal-panel *{font-style: normal; font-weight: normal; list-style: none;}
    7. 

  7. .popui__modal-mask {background: black; opacity: .6; pointer-events: auto; height: 100%; width: 100%; position: fixed; top: 0; left: 0; animation: mask-fadeIn .5s;}
    8. 

  8. @keyframes mask-fadeIn {0% {opacity: 0;}100% {opacity: .6;}}
    9. 

  9. .popui__panel-main{display: table; color:#333; font-family: 宋体,helvetica,arial,sans-serif; pointer-events: none; height: 100%; width: 100%; position: fixed; left: 0; top: 0;}
    10. 

  10. .popui__panel-main .popui__panel-section{display: table-cell; vertical-align: middle; text-align: center;}
    11. 

  11. .popui__panel-child{background: #7b7a7a;border-radius: 3px;display: inline-block;pointer-events: auto;font-size: 14px;text-align: left;max-width: 300px;position: relative;}
    12. 

  12. 

  13. .popui__panel-tit{color:#333; font-size: 14px; padding: 7px 20px; text-align: center;}
    14. 

  14. .popui__panel-cnt{padding: 15px; text-align: center; line-height: 1.3; word-wrap: break-word; word-break: break-all;}
    15. 

  15. .popui__panel-btn{display: flex; align-items: center; line-height: 40px; position: relative;}
    16. 

  16. .popui__panel-btn:after{content: ''; border-top: 1px solid #e7e7e7; position: absolute; left: 0; right: 0; top: 0; z-index:5;}
    17. 

  17. .popui__panel-btn .btn{cursor: pointer; display: block; flex: 1; font-size: 14px; text-align: center; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative; z-index: 3;}
    18. 

  18. .popui__panel-btn .btn:active{background: #f5f5f5;}
    19. 

  19. .popui__panel-btn .btn:after{content:"";border-left:1px solid #e7e7e7;position:absolute;top:0;bottom:0;right:0;}
    20. 

  20. .popui__panel-btn .btn:last-child:after{border:none;}
    21. 

  21. .popui__panel-btn .btn:first-child{border-bottom-left-radius: 3px;}
    22. 

  22. .popui__panel-btn .btn:last-child{border-bottom-right-radius: 3px;}
    23. 

  23. /* +++ */
    24. 

  24. .wcPop-close .popui__modal-mask{animation: anim-fadeOut .3s;}
    25. 

  25. .wcPop-close .popui__panel-child{animation: anim-fadeOut .3s;}
    26. 

  26. .wcPop-close .popui__footer, .wcPop-close .popui__actionsheet,  .wcPop-close .popui__actionsheetMini{animation: anim-fadeOutUp .3s;}
    27. 

  27. 

  28. 

  29. /* __ 自定义样式 */
    30. 

  30. /* 样式1（toast） */
    31. 

  31. .popui__toast{background: rgba(17,17,17,.7); color: #fff; min-height: 120px; width: 120px;}
    32. 

  32. .popui__toast .popui__toast-icon{margin-bottom: 5px;}
    33. 

  33. .popui__toast .popui__toast-icon img{height:24px;width:24px;}
    34. 

  34. .popui__toast .popui__panel-cnt{padding: 35px 10px 15px;}
    35. 

  35. /* 样式2（footer底部弹出） */
    36. 

  36. .popui__footer{background: 0 0; margin:0 auto; max-width: 100%; position: fixed; left: 0; right: 0; bottom: 10px; width: 95%;}
    37. 

  37. .popui__footer .popui__panel-cnt{background-color: rgba(255,255,255,.8); border-radius: 3px 3px 0 0; padding: 15px 10px;}
    38. 

  38. .popui__footer .popui__panel-btn{background: 0 0; border-top: 0; display: block;}
    39. 

  39. .popui__footer .popui__panel-btn:after{display:none;}
    40. 

  40. .popui__footer .popui__panel-btn .btn{background: rgba(255,255,255,.8); border-top: 1px solid #ccc;}
    41. 

  41. .popui__footer .popui__panel-btn .btn:after{border-left:none;}
    42. 

  42. .popui__footer .popui__panel-btn .btn:nth-last-child(2){border-radius: 0 0 3px 3px;}
    43. 

  43. .popui__footer .popui__panel-btn .btn:nth-last-child(1){border-top: 0; border-radius: 3px; margin-top: 10px;}
    44. 

  44. /* 样式3（actionsheet底部弹出式菜单） */
    45. 

  45. .popui__actionsheet{border-radius: 0; margin:0 auto; max-width: 100%; position: fixed; left: 0; right: 0; bottom: 0; width: 100%;}
    46. 

  46. .popui__actionsheet .popui__panel-cnt{padding: 15px 10px;}
    47. 

  47. .popui__actionsheet .popui__panel-btn{background: 0 0; border-top: 0; display: block;}
    48. 

  48. .popui__actionsheet .popui__panel-btn .btn{border-top: 1px solid #e7e7e7;}
    49. 

  49. .popui__actionsheet .popui__panel-btn .btn:after{border-left:none;}
    50. 

  50. .popui__actionsheet .popui__panel-btn .btn:nth-last-child(1){border-top: 5px solid #e7e7e7; border-bottom-right-radius: 0;}
    51. 

  51. /* 样式3（actionsheet底部弹出式菜单【迷你仿微信】） */
    52. 

  52. .popui__actionsheetMini{border-radius: 0; margin:0 auto; max-width: 100%; position: fixed; left: 0; right: 0; bottom: 0; width: 100%;}
    53. 

  53. .popui__actionsheetMini .popui__panel-cnt{padding: 15px 20px; text-align:left;}
    54. 

  54. .popui__actionsheetMini .popui__panel-btn{background: 0 0; border-top: 0; display: block;}
    55. 

  55. .popui__actionsheetMini .popui__panel-btn .btn{border-top: none; padding-left:20px;text-align:left;}
    56. 

  56. .popui__actionsheetMini .popui__panel-btn .btn:after{border-left:none;}
    57. 

  57. 

  58. /* 样式4（ios、android） */
    59. 

  59. .wcPop-close .popui__ios, .wcPop-close .popui__android, .wcPop-close .popui__androidSheet{animation: anim-fadeScaleOut .3s;}
    60. 

  60. .popui__ios{width: 80%;}
    61. 

  61. .popui__ios .popui__panel-tit{font-size:16px; padding: 20px 25px 10px;}
    62. 

  62. .popui__ios .popui__panel-cnt{color:#808080; padding: 0 25px 15px; min-height:40px;}
    63. 

  63. .popui__ios .popui__panel-cnt:first-child{color:#333; padding: 40px 20px 25px;}
    64. 

  64. .popui__ios .popui__panel-btn{line-height: 48px;}
    65. 

  65. .popui__ios .popui__panel-btn .btn{font-size: 14px;}
    66. 

  66. .popui__android{width: 80%;}
    67. 

  67. .popui__android .popui__panel-tit{font-size:18px; padding: 20px 25px 10px; text-align: left;}
    68. 

  68. .popui__android .popui__panel-cnt{color:#808080; font-size: 15px; padding: 5px 25px 35px; text-align: left; min-height:40px;}
    69. 

  69. .popui__android .popui__panel-cnt:first-child{color:#333; padding: 25px 25px 35px;}
    70. 

  70. .popui__android .popui__panel-btn{display: block; padding: 0 25px 12px; text-align: right; line-height: 34px;}
    71. 

  71. .popui__android .popui__panel-btn:after{display: none;}
    72. 

  72. .popui__android .popui__panel-btn .btn{border-radius:0; font-size: 14px; display: inline-block; vertical-align: top; padding: 0 15px;}
    73. 

  73. .popui__android .popui__panel-btn .btn:after{display: none;}
    74. 

  74. .popui__android .popui__panel-btn .btn:first-child{color: #808080;}
    75. 

  75. .popui__android .popui__panel-btn .btn:last-child{margin-right: -10px;}
    76. 

  76. .popui__androidSheet{border-radius:2px;width: 80%;}
    77. 

  77. .popui__androidSheet .popui__panel-tit{font-size:21px; padding: 15px 20px 5px; text-align: left;}
    78. 

  78. .popui__androidSheet .popui__panel-cnt{color:#808080; font-size: 17px; padding: 0 20px 15px; text-align: left;}
    79. 

  79. .popui__androidSheet .popui__panel-cnt:first-child{color:#333; padding: 15px 20px 5px;}
    80. 

  80. .popui__androidSheet .popui__panel-btn{display: block;padding: 0;text-align: left;line-height: 42px;color: #fff;}
    81. 

  81. .popui__androidSheet .popui__panel-btn:after{display: none;}
    82. 

  82. .popui__androidSheet .popui__panel-btn .btn{border-bottom: 1px solid #eee;border-radius:0;font-size: 16px;padding: 0 20px;text-align: left;}
    83. 

  83. .popui__androidSheet .popui__panel-btn .btn:last-child{border-bottom: 0;}
    84. 

  84. .popui__androidSheet .popui__panel-btn .btn:after{display: none;}
    85. 

  85. 

  86. 

  87. /* __ 弹窗动画 */
    88. 

  88. .anim-fadeIn{animation: anim-fadeIn .5s;}
    89. 

  89. .anim-scaleIn{animation: anim-scaleIn .3s;}
    90. 

  90. .anim-fadeInUp{animation: anim-fadeInUp .3s;}
    91. 

  91. .anim-fadeInDown{animation: anim-fadeInDown .3s;}
    92. 

  92. .anim-fadeOutUp{animation: anim-fadeOut .3s;}
    93. 

  93. .anim-fadeOut{animation: anim-fadeOut .3s;}
    94. 

  94. .anim-fadeScaleOut{animation: anim-fadeScaleOut .3s;}
    95. 

  95. .anim-rollIn{animation: anim-rollIn .3s;}
    96. 

  96. .anim-shake{animation: anim-shake .3s;}
    97. 

  97. .anim-loading{animation: anim-loading 1s steps(12, end) infinite;}
    98. 

  98. .anim-footer{animation: anim-footer .3s;}
    99. 

  99. /* 渐变 */
    100. 

  100. @keyframes anim-fadeIn {
    101. 

  101. 	0% {opacity: 0;}
    102. 

  102. 	100% {opacity: 1;}
    103. 

  103. }
    104. 

  104. /* 缩放 */
    105. 

  105. @keyframes anim-scaleIn {
    106. 

  106. 	0% {opacity: 0; transform: scale(.9);}
    107. 

  107. 	100% {opacity: 1; transform: scale(1);}
    108. 

  108. }
    109. 

  109. /* 由上向下打开 */
    110. 

  110. @keyframes anim-fadeInUp {
    111. 

  111. 	0% {opacity: 0; transform: translateY(-100%);}
    112. 

  112. 	100% {opacity: 1; transform: translateY(0);}
    113. 

  113. }
    114. 

  114. /* 由下向上打开 */
    115. 

  115. @keyframes anim-fadeInDown {
    116. 

  116. 	0% {opacity: 0; transform: translateY(100%);}
    117. 

  117. 	100% {opacity: 1; transform: translateY(0);}
    118. 

  118. }
    119. 

  119. /* 由上向下渐变关闭 */
    120. 

  120. @keyframes anim-fadeOutUp {
    121. 

  121. 	100% {opacity: 0; transform: translateY(100%);}
    122. 

  122. }
    123. 

  123. /* 渐变缩小关闭 */
    124. 

  124. @keyframes anim-fadeOut {
    125. 

  125. 	100% {opacity: 0;}
    126. 

  126. }
    127. 

  127. /* 渐变缩小关闭 */
    128. 

  128. @keyframes anim-fadeScaleOut {
    129. 

  129. 	100% {opacity: 0;-webkit-transform: scale(.9);transform: scale(.9);}
    130. 

  130. }
    131. 

  131. /* 左侧翻转打开 */
    132. 

  132. @keyframes anim-rollIn {
    133. 

  133. 	0% {opacity: 0; transform: translateX(-100%) rotate(-120deg);}
    134. 

  134. 	100% {opacity: 1; transform: translateX(0) rotate(0);}
    135. 

  135. }
    136. 

  136. /* 震动 */
    137. 

  137. @keyframes anim-shake {
    138. 

  138. 	0%,100% {transform: translateX(0);}
    139. 

  139. 	10%,30%,50%,70%,90% {transform: translateX(-10px);}
    140. 

  140. 	20%,40%,60%,80% {transform: translateX(10px);}
    141. 

  141. }
    142. 

  142. /* 加载中 */
    143. 

  143. @keyframes anim-loading {
    144. 

  144. 	0% {transform: rotate3d(0, 0, 1, 0deg);}
    145. 

  145.     100% {transform: rotate3d(0, 0, 1, 360deg);}
    146. 

  146. }
    147. 

  147. /* 底部向上弹出 */
    148. 

  148. @keyframes anim-footer {
    149. 

  149. 	0% {opacity: 0; transform: translateY(800px)}
    150. 

  150. 	100% {opacity: 1; transform: translateY(0);}
    151. 

  151. }
    152. 

  152. 

  153. 

  154. /* 去除android上a、button、input标签点击产生的阴影 */
    155. 

  155. a,button,input,label{-webkit-tap-highlight-color:rgba(255,0,0,0); outline:none;}
    156. 

  156. /* __ flex弹性盒子 */
    157. 

  157. .flexbox{display:-webkit-box; display:-webkit-flex; display:flex; display:-ms-flexbox;}
    158. 

  158. .flex-alignc{align-items: center;}
    159. 

  159. .flex1{-webkit-box-flex:1; -webkit-flex:1; -ms-flex:1; flex:1;}
    160. 

  160. .flex2{-webkit-box-flex:2; -webkit-flex:2; -ms-flex:2; flex:2;}
    161.