zepto.mdatetimer.css 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. .mt_body{
  2. height: 400px;
  3. overflow: hidden;
  4. position: relative;
  5. }
  6. .mt_panel{
  7. background-color: #F7F7F7;
  8. padding: 10px 0 0 0;
  9. }
  10. .mt_panel h3{
  11. color: #4eccc4;
  12. font-size: 16px;
  13. text-align: center;
  14. font-weight: normal;
  15. }
  16. .mt_year, .mt_month, .mt_day, .mt_hour, .mt_minute, .mt_second{
  17. float: left;
  18. width: 33.33%;
  19. height: 50%;
  20. vertical-align: top;
  21. text-align: center;
  22. overflow: hidden;
  23. }
  24. .mt_body ul li{
  25. height: 40px;
  26. line-height: 40px;
  27. font-size: 18px;
  28. color: #555;
  29. }
  30. .mt_indicate, .mt_indicate:after{
  31. top: 78px;
  32. position: absolute;
  33. border-top: 1px solid #e9e9e9;
  34. width: 100%;
  35. height: 0;
  36. font-size: 0;
  37. }
  38. .mt_indicate:after{
  39. content: "";
  40. top: 40px;
  41. }
  42. .mt_indicate.cate2{
  43. top: 280px;
  44. }
  45. .mt_body li.selected{
  46. color: #4eccc4;
  47. }
  48. .mt_body ul .mt_note{
  49. font-size: 12px;
  50. color: #000;
  51. }
  52. .mt_confirm{
  53. text-align: center;
  54. margin-top: 10px;
  55. overflow: hidden;
  56. }
  57. .mt_ok, .mt_cancel, .mt_setnow{
  58. display: inline-block;
  59. float: left;
  60. vertical-align: top;
  61. width: 33.33%;
  62. height: 30px;
  63. line-height: 30px;
  64. border: 1px solid #4eccc4;
  65. color: #4eccc4;
  66. box-sizing: border-box;
  67. border-bottom: none;
  68. border-right: none;
  69. }
  70. .mt_ok{
  71. margin-left: -1px;
  72. }
  73. .mt_cancel, .mt_setnow{
  74. }
  75. .mt_mask{
  76. width: 100%;
  77. height: 100%;
  78. -moz-transition: opacity .5s linear 0s;
  79. -webkit-transition: opacity .5s linear 0s;
  80. -o-transition: opacity .5s linear 0s;
  81. -ms-transition: opacity .5s linear 0s;
  82. transition: opacity .5s linear 0s;
  83. position: absolute;
  84. top: 0;
  85. left: 0;
  86. display: block;
  87. visibility: hidden;
  88. background: #000;
  89. opacity: 0;
  90. z-index: 10;
  91. }
  92. .mt_mask.show{
  93. visibility: visible;
  94. opacity: 0.25;
  95. }
  96. .mt_poppanel {
  97. -moz-transition: -moz-transform .3s ease-in-out 0s;
  98. -ms-transition: -ms-transform .3s ease-in-out 0s;
  99. -webkit-transition: -webkit-transform .3s ease-in-out 0s;
  100. -o-transition: -o-transform .3s ease-in-out 0s;
  101. transition: transform .3s ease-in-out 0s;
  102. -ms-transform: translate3d(0,100%,0);
  103. -moz-transform: translate3d(0,100%,0);
  104. -webkit-transform: translate3d(0,100%,0);
  105. -o-transform: translate3d(0,100%,0);
  106. transform: translate3d(0,100%,0);
  107. position: fixed;
  108. bottom: 0;
  109. left: 0;
  110. width: 100%;
  111. height: auto;
  112. z-index: 11;
  113. -webkit-user-select : none;
  114. }
  115. .mt_poppanel.show{
  116. -ms-transform: translate3d(0,0,0);
  117. -moz-transform: translate3d(0,0,0);
  118. -webkit-transform: translate3d(0,0,0);
  119. -o-transform: translate3d(0,0,0);
  120. transform: translate3d(0,0,0);
  121. }
  122. .mt_sepline{
  123. width: 100%;
  124. height: 0;
  125. border-top: 1px solid #4eccc4;
  126. clear: both;
  127. }