style.css 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  1. @charset "utf-8";
  2. /********MH STAR*********/
  3. /**/
  4. ::-ms-clear { display: none; }
  5. ::-ms-reveal { display: none; }
  6. /* color + background color */
  7. .c-787878 { color:#787878;}
  8. .c-f47979 { color:#f47979;}
  9. .bgc-f6f9fb { background-color:#f6f9fb;}
  10. .c-666 { color:#666;}
  11. .c-btn-f4f5f9 { background-color: #f4f5f9;color:#666666;border:1px solid #dfdfdf;}
  12. .c-btn-f4f5f9:hover { background-color: #e4e5e8; }
  13. .c-btn-fff { background-color: #ffffff; color: #999999; border: #e1e1e1 1px solid; }
  14. .c-btn-fff:hover { background-color: #f8505b;border-color:#f8505b;color:#fff; }
  15. /* margin */
  16. .mt40 { margin-top:40px;}
  17. /* container */
  18. .section { position: absolute; top:0; bottom:0; right:0; width:100%; background-color:#fff; border:1px solid #dedede; }
  19. .section-header:after { content:""; display:table; line-height: 0; clear:both;}
  20. .section-header { position: relative; padding:12px 15px; height: 24px; line-height: 24px; background-color:#f4f5f7;}
  21. .section-header h4 { color:#666; font-size: 14px;}
  22. .section-header .icon-guanbi { position: absolute; right: 18px; top:14px; font-size: 15px;}
  23. .section-main { position: absolute; left: 0; top:48px; bottom:0; width:100%;}
  24. /* form */
  25. .form li:after, .form li:before { content:""; display:table; line-height: 0;}
  26. .form li:after { clear:both;}
  27. .form li { margin-bottom: 15px; *zoom:1;}
  28. .form .form-label { display:inline; float:left; width:50px; height:32px; font-size: 14px; line-height: 32px; color:#b4b4b4;}
  29. .form .form-group { margin-left: 50px;}
  30. .form .form-label-w75 { width:75px;}
  31. .form .form-label-w75~.form-group { margin-left:95px;}
  32. .form .form-val { padding:4px 15px; line-height: 24px; font-size: 14px;}
  33. .form .error .input-text { border-color:#f47979; background-color:#fff;}
  34. .input-text { display:inline-block; padding:5px 15px; width: 250px; height:20px; line-height: 20px; border:1px solid #f6f7fa; background-color: #f6f7fa; font-size: 14px; color:#666; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; *display:inline; *zoom:1;}
  35. .input-text:focus { border-color:#40d0a7; background-color:#fff;}
  36. .textarea-block { margin-left: 10px; margin-right:10px;}
  37. .textarea { padding:5px 10px; width: 100%; margin-left:-11px; margin-right: -11px; height:120px; line-height: 30px; border:1px solid #f6f7fa; background-color: #f6f7fa; font-size: 14px; color:#666; resize:none; overflow-y:auto; overflow-x:hidden; word-wrap: break-word; word-break: break-all; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px;}
  38. .textarea:focus { border-color:#40d0a7; background-color:#fff;}
  39. /* customed select */
  40. .cus-sel { position:relative; display:inline-block; vertical-align: middle; *display:inline; *zoom:1; z-index:2;}
  41. .cus-sel-chosed { position: relative; height:30px; width:245px; padding:0 25px 0 10px; line-height:30px; background-color:#f6f7fa; border:1px solid #f6f7fa; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; cursor:pointer;}
  42. .cus-sel-chosed-txt { color:#666; font-size:14px;}
  43. .jselect-icon { position: absolute; right:0; top:0; display:block; width: 25px; height: 30px; color:#999;}
  44. .jselect-icon .iconfont { font-size: 12px;}
  45. .cus-sel-list { position:absolute; left:0; top:31px; width:280px; padding:0; border:1px solid #40d0a7; border-top:none; background-color:#fff; -webkit-border-radius:0 0 3px 3px; -moz-border-radius:0 0 2px 2px; border-radius:0 0 2px 2px; display:none;}
  46. .cus-sel-list li { margin:0; padding:0;}
  47. .cus-sel-list a { display: block; height:30px; padding:0 10px; font-size:14px; line-height:30px; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; cursor:pointer;}
  48. .cus-sel-list a:link, .cus-sel-list a:visited { color:#4c4c4c;}
  49. .cus-sel-list a:hover, .cus-sel-list li.hover a { background-color:#18bd9c; color:#fff; text-decoration: none;}
  50. .cus-sel.active .cus-sel-chosed { border-color:#40d0a7; border-bottom:1px solid transparent; background-color:#fff; -webkit-border-radius:2px 2px 0 0; -moz-border-radius:2px 2px 0 0; border-radius:2px 2px 0 0;}
  51. .cus-sel.active .jselect-icon { background-position: -35px 0; color:#40d0a7;}
  52. .cus-sel-w135 .cus-sel-chosed { width: 99px;}
  53. .cus-sel-w135 .cus-sel-list { width: 134px;}
  54. /* customed checkbox */
  55. .icon-chkbox { display: inline-block; width:16px; height:17px; margin-right: 8px; background: url(../images/icon-checkbox.png) no-repeat; vertical-align: middle; *display: inline; *zoom:1;}
  56. .icon-chkbox.checked { background-position: -16px 0;}
  57. /* button & a-linked button */
  58. .btn { display:inline-block; width:90px; height:34px; background-color: #40d0a7; color:#fff; text-align: center; overflow:visible; border:0; opacity:.9; cursor:pointer; vertical-align: middle; font-size: 16px; -webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px; -webkit-transition: all .1s ease;-moz-transition: all .1s ease;-ms-transition: all .1s ease;-o-transition: all .1s ease;transition: all .1s ease; *display:inline; *zoom:1;}
  59. .btn:hover { opacity:1;}
  60. .btn-xs { width: 65px; height:30px; font-size: 14px;}
  61. .btn-s { height: 28px; font-size:14px;}
  62. .btn-l { width: 110px;}
  63. .btn-red { background-color:#ff5f6a;}
  64. .btn-gray { background-color:#f5f5f5; border:1px solid #e1e1e1; color:#999;}
  65. .btn.btn-gray { width: 88px;}
  66. .btn-xs.btn-gray { width: 63px;}
  67. a.btn { line-height: 34px;}
  68. a.btn-xs { line-height:30px;}
  69. a.btn-s { line-height: 28px;}
  70. a.btn.btn-gray { height: 32px; line-height: 32px;}
  71. a.btn-xs.btn-gray { height: 28px; line-height: 28px;}
  72. a.btn-xs .iconfont { font-size: 12px; vertical-align: top; *vertical-align: middle;}
  73. /* search */
  74. .search:after, .search:before { content:""; display:table; line-height: 0;}
  75. .search:after { clear:both;}
  76. .search { position: relative; padding:6px 6px 6px 36px; line-height: 20px; border:1px solid #e1e1e1; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; -webkit-transition: border-color .3s ease;
  77. -o-transition: border-color .3s ease;
  78. transition: border-color .3s ease; *zoom:1;}
  79. .search .iconfont { position: absolute; left: 6px; top:8px; color:#d0d0d0; font-weight: bold; font-size:20px;}
  80. .search .search-text { width: 100%; border:0 none; padding:0; font-size:14px;}
  81. .search.focus { border-color:#40d0a7;}
  82. .search.focus .iconfont { color:#40d0a7;}
  83. /**/
  84. .btnEdit, .btnSaveEdit { right:0; top:0;}
  85. .iconfont-f70 { display: inline-block; width: 70px; height: 70px; line-height: 70px; background-color:#4cd964; color:#fff; text-align: center; vertical-align: middle; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; *display: inline; *zoom:1;}
  86. .iconfont-f70 .iconfont { font-size:70px;}
  87. .lh36 { line-height: 36px;}
  88. .sub-ul-tit { padding:2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
  89. .sub-ul ul { display: none;}
  90. .sub-ul li { margin-top:10px; padding:2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
  91. .sub-ul img, .contact-chosed img { width:30px; height: 30px; margin-right: 5px; vertical-align: middle; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;}
  92. .contact-chosed li { padding: 5px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
  93. .contact-chosed li.active { background-color:#eaf1f7;}
  94. .member-control { position: relative; margin-top: 150px;}
  95. .member-control .btn { display: block; margin-left: auto; margin-right: auto;}
  96. .member-control .btn-gray:hover { background-color:#ff5f6a; border-color:#ff5f6a; color:#fff;}
  97. .memberlist-wrap { height: 400px;}
  98. .icon-date { position: absolute; left: 250px; top:0; color:#999; font-size:30px; line-height: 1;}
  99. /********MH END*********/
  100. /******YY STAR********/
  101. body,html{overflow-x:hidden;overflow-y:hidden;}
  102. /********聊天窗口************/
  103. .msg-body .sec-main-con { padding: 15px 0 45px;}
  104. .sec_scroll{width:100%;position:absolute;top:0;bottom:200px;left:0;}
  105. .msg-body .sec-main-con, .msg-body .scroll-pane { width:100%;}
  106. .sec-main-con{padding-bottom:10px;}
  107. .face_include .scroll-pane{width:426px;}
  108. .msg-time { display: inline-block; height: 18px; padding:0 10px; line-height: 18px; color:#fff; background-color:#ccc; text-align: center; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
  109. .t-center{text-align:center;}
  110. .msg-other:after, .msg-mine:after { content: ""; display: table; clear:both;}
  111. .msg-other, .msg-mine { margin-top: 20px; padding:0 15px; *zoom:1;}
  112. .user-avatar img { display: block; width: 40px; height: 40px; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%;}
  113. .user-name { color:#333; font-size: 16px;}
  114. .msg-box { position: relative; padding: 8px 15px; margin-top: 5px; max-width:320px; font-size: 14px; line-height: 24px; color:#333; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}
  115. .msg-box i.tipico-err { position:absolute;font-size:26px;color:#f00;}
  116. .msg-box p {word-break:break-all; word-wrap:break-word;}
  117. .msg-other .user-avatar { display: inline; float: left; margin-right: 10px;}
  118. .msg-other .msg-box { margin-left: 5px; background-color: #47d7ad; border:1px solid #47d7ad; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.15); box-shadow: 0 1px 1px rgba(0,0,0,.15);color:#fff;}
  119. .msg-other .msg-box-arr { position: absolute; left: -14px; top:13px; margin-top: -7px; display: block; width: 0; height: 0; border-width:7px; border-style: dashed solid dashed dashed; border-color: transparent #e1e1e1 transparent transparent;}
  120. .msg-other .msg-box-arr i { position: absolute; left: -6px; top:0; margin-top: -7px; display: block; width: 0; height: 0; border-width:7px; border-style: dashed solid dashed dashed; border-color: transparent #47d7ad transparent transparent;}
  121. .msg-other .msg-box .tipico-err { right: -37px; top: 50%; margin-top: -13px;}
  122. .msg-mine .user-avatar { display: inline; float: right; margin-left: 10px;}
  123. .msg-mine .user-name { text-align: right;}
  124. .msg-mine .msg-box { margin-right: 5px; background-color: #eef0f6; border:1px solid #eef0f6; -webkit-box-shadow: inset 0 1px 1px #eef0f6, 0 1px 1px rgba(0,0,0,.15); box-shadow: inset 0 1px 1px #eef0f6, 0 1px 1px rgba(0,0,0,.15);color:#666666;}
  125. .msg-mine .msg-box-arr { position: absolute; right: -14px; top:13px; margin-top: -7px; display: block; width: 0; height: 0; border-width:7px; border-style: dashed dashed dashed solid; border-color: transparent transparent transparent #eef0f6;}
  126. .msg-mine .msg-box-arr i { position: absolute; right: -6px; top:0; margin-top: -7px; display: block; width: 0; height: 0; border-width:7px; border-style: dashed dashed dashed solid; border-color: transparent transparent transparent #eef0f6;}
  127. .msg-mine .msg-box .tipico-err { left: -37px; top: 50%; margin-top: -13px;}
  128. .tipico { display: inline-block; background:url(../images/tipico.png) no-repeat; overflow:hidden; *display: inline; *zoom:1;}
  129. .msg-body .sec-btm-con:after { content: ""; display: table; clear:both;}
  130. .msg-body .sec-btm-con { padding:7px 15px; *zoom:1;position:relative;}
  131. .msg-body .icon-attach, .msg-body .icon-face, .msg-body .icon-print { margin: 7px 15px 0 0; opacity:.9;}
  132. .msg-body .icon-attach:hover, .msg-body .icon-face:hover, .msg-body .icon-print:hover { opacity:1;}
  133. .msg-inp { width: 458px; height: 24px; margin-top: 1px; padding:4px 5px; line-height: 24px; border:1px solid #e1e1e1; background-color: #fff; -webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
  134. .msg-inp:focus { border:1px solid #39a1e7;}
  135. .get_more{position:absolute;width:100%;height:35px;background:#f0f0f0;text-align:center;font-size:14px;top:0;left:0;z-index:12;}
  136. .get_more a{display:block;width:100%;height:35px;line-height:35px;color:#999999;}
  137. .section-header i{font-size:24px;cursor:pointer;color:#a9aaaa;}
  138. /*提示消息*/
  139. #altmsg {width: 100%; text-align: center;}
  140. .altmsg { display: inline-block; height: 24px; padding: 0 12px; line-height: 24px; background-color:#cccccc;color:#fff; -webkit-border-radius:12px; -moz-border-radius:12px; border-radius:5px; *display: inline; *zoom:1;}
  141. /*聊天操作栏*/
  142. .opara_linebox{position:absolute;bottom:0;left:0;width:100%;height:200px;zoom:1;}
  143. .opara_linebox .exp_boxer{background:#eef0f6;border-top:1px solid #e1e1e1;border-bottom:1px solid #e1e1e1;padding:5px 20px;position:relative;}
  144. .opara_linebox .exp_boxer i{color:#999999;font-size:20px;margin:0 5px;cursor:pointer;}
  145. .input_boxer{height:190px;}
  146. .input_boxer .text_word{padding:5px 20px;}
  147. .input_boxer textarea{width:100%;height:60px;border:none;}
  148. .bottom_btnline a{padding:6px 20px;}
  149. /**表情层**/
  150. .qb_facebox{width:416px;height:256px;background:url(../images/icon_conf.png) no-repeat left top;}
  151. .face_include{position: absolute;left: 12px;bottom:60px;width: 426px;height:216px;background-color: #fff;overflow-x: hidden;overflow-y: auto;padding:10px 0px 10px 10px;display:none;border-radius:5px;border:1px solid #e1e1e1;overflow-y:hidden;overflow-x:hidden;}
  152. .qb_facebox a{display:block;width:32px;height:32px;float:left;}
  153. .c_include{position: absolute;left: 0;top:0;bottom: 0;width: 100%;overflow-x: hidden;overflow-y: auto;z-index:997;}
  154. /*切换组织*/
  155. .mes_box .si_part .base_mess,.mes_box .si_part .my_group{border:1px solid #e1e1e1;border-radius:3px;padding:10px 20px 30px;background:#fcfcfc;margin-bottom:15px;}
  156. .bgray_box{margin-bottom:15px;}
  157. .bgray_box .pic{float:left;width:70px;height:70px;border-radius:50%;overflow:hidden;}
  158. .pson_box,.sec-main-con .group_box{padding:15px 20px 15px;}
  159. .pson_box span{color:#333333;font-size:16px;line-height:35px;}
  160. .pson_box span i.wemen{color:pink;}
  161. .pson_box span i.men{color:#0072dd;}
  162. .pson_box p{color:#999999;font-size:14px;line-height:25px;}
  163. .bgray_box .word{vertical-align:middle;height:70px;padding-left:80px;}
  164. .bgray_box table{font-size:14px;}
  165. .bgray_box table td.name{color:#b4b4b4;font-size:14px;width:10%;text-align:left;}
  166. .bgray_box table td{color:#333333;width:90%;text-align:left;}
  167. .bgray_box table tr{height:33px;line-height:33px;}
  168. /*群组管理*/
  169. .bgray_box .word b{font-weight:normal;color:#333333;font-size:16px;line-height:70px;}
  170. .bgray_box .tit span{color:#b4b4b4;font-size:14px;padding-right:30px;}
  171. .bgray_box .tit{color:#333333;border-bottom:1px dotted #dddddd;height:35px;line-height:35px;}
  172. .ctr_box span{color:#333333;font-size:14px;}
  173. .ctr_box span i{color:#b4b4b4;padding-right:15px;}
  174. .ctr_box{padding-top:10px;}
  175. .ctr_box ul {padding-top:15px;}
  176. .ctr_box ul li{width:76px;float:left;height:90px;}
  177. .ctr_box ul li .pic{width:60px;height:60px;overflow:hidden;border-radius:50%;margin:0 auto;float:none;}
  178. .ctr_box ul li p{color:#333333;font-size:14px;display:block;width:100%;text-align:center;line-height:30px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
  179. .ctr_box ul li p input{vertical-align:middle;}
  180. .ctr_box ul li p label{vertical-align:middle;}
  181. .ctr_box ul li p label a{color:#333333;}
  182. a.blank{display:block;border:1px solid #e1e1e1;border-radius:5px;text-align:center;padding:8px 15px;width:80px;color:#666666;font-size:16px;margin-left:10px;}
  183. .ctr_box ul li a i{font-size:62px;color:#c7c7c7;cursor:pointer;display:block;width:62px;height:62px;margin:-13px auto 0;}
  184. .ctr_box ul li a:hover i{color:#ddd;}
  185. .ctr_box li span{float:left;display:block;width:60px;height:60px;border:1px solid #c7c7c7;border-radius:50%;cursor:pointer;}
  186. .ctr_box li span:hover{border-color:#848484;}
  187. .ctr_box li input[type='checkbox']{margin-right:5px;vertical-align:middle;}
  188. .ctr_box li span.minner{background:url(../images/minn_Hpic.png) no-repeat center center;}
  189. .ctr_box li span.minner:hover{background:url(../images/minn_pic.png) no-repeat center center;}
  190. .ctr_box li span.adders{background:url(../images/ad_pic.png) no-repeat center center;}
  191. .ctr_box li span.adders:hover{background:url(../images/ad_Hpic.png) no-repeat center center;}
  192. .gl_group_boxer{padding:0 20px 15px;}
  193. /*loading*/
  194. .loading_box{height:120px; width:160px; overflow:hidden;position:absolute; top:50%; left:50%; margin:-60px auto auto -80px; z-index:1001; word-wrap: break-word;border-radius:10%;background:url(../images/loading.gif) no-repeat center center;}
  195. /******YY END********/
  196. .system-info .sec_scroll {bottom:50px;}
  197. /* confirmation-list */
  198. .confirmation-list li {border-bottom:#e1e1e1 1px solid; padding-bottom:20px; margin-bottom:20px;}
  199. .confirmation-list li div.imgs {width:65px; height:65px; border-radius:50%; overflow:hidden;}
  200. .confirmation-list li div.name p {line-height:24px; max-width:150px;}
  201. /* application */
  202. .application .pic , .application .pic img {display:block; width:70px; height:70px; border-radius:50%; overflow:hidden}
  203. .application .word {line-height:70px;}
  204. .application .group {display: inline-block; background: #f60; color: #fff; padding: 0px 5px 2px; border-radius: 2px; margin-left: 5px; position:relative; top:25px;}
  205. .application-info .title {width:60px;}
  206. .application-info .cont {overflow:hidden;}