weChat.css 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484
  1. .single_tipsWrap{
  2. background-color: #fff;
  3. height: 45px;
  4. position: relative;
  5. width: 100%;
  6. z-index: 22;
  7. }
  8. .single_tipsWrap span{
  9. color: #797979;
  10. display: inline-block;
  11. height: 100%;
  12. line-height: 45px;
  13. padding-left: 17px;
  14. font-size: 12px;
  15. }
  16. .single_tipsWrap button{
  17. position: relative;
  18. float: right;
  19. border: 1px solid #f75958;
  20. background-color: #fff;
  21. color: #f75958;
  22. top: 8px;
  23. right: 13px;
  24. border-radius: 3px;
  25. height: 29px;
  26. }
  27. .single_tipsWrap .concernAction{
  28. color: #f75958;
  29. text-decoration: none;
  30. font-weight: 500;
  31. font-size: 14px;
  32. padding-right: 12px;
  33. display: block;
  34. }
  35. .single_tipsWrap .concernAction:before{
  36. content: "+";
  37. display: block;
  38. color: #f75958;
  39. font-size: 20px;
  40. position: absolute;
  41. right: 7px;
  42. top: -2px;
  43. }
  44. .single_chatObjectA{
  45. width: 91%;
  46. margin-left: 12px;
  47. margin-right: 12px;
  48. float: left;
  49. }
  50. .single_chatObjectA p{
  51. background-color: #fff !important;
  52. }
  53. .single_chatObjectB{
  54. width: 91%;
  55. margin-left: 12px;
  56. margin-right: 12px;
  57. float: left;
  58. }
  59. .single_chatObjectB p{
  60. float: right !important;
  61. margin-right: 2% !important;
  62. margin-left: 0 !important;
  63. }
  64. .single_newTime{
  65. display: table;
  66. width: auto;
  67. overflow: hidden;
  68. padding: 1px 6px;
  69. color: #fff;
  70. background-color: #d0d0d0;
  71. font-size: 12px;
  72. text-align: center;
  73. border-radius: 4px;
  74. margin: 12px auto;
  75. }
  76. .single_chatObject .chatContentWrap{
  77. width: auto;
  78. max-width:100%;
  79. }
  80. .chatContentWrap .chatContentWrapList{
  81. display: block;
  82. width: 92%;
  83. height: auto;
  84. min-height: 33px;
  85. overflow: hidden;
  86. margin: 12px 4%;
  87. }
  88. .chatContentWrap .chatContentWrapList img{
  89. width: 45px;
  90. height: 45px;
  91. border: none;
  92. border-radius: 50%;
  93. float: left;
  94. }
  95. .single_chatObjectB img{
  96. float:right !important;
  97. }
  98. .chatContentWrap .chatContentWrapList p{
  99. float: left;
  100. display: inline-block;
  101. max-width: 75%;
  102. position: relative;
  103. text-align: justify;
  104. margin: 0 0 0 3%;
  105. background-color: #c5e7fc;
  106. padding: 8px 17px;
  107. border-radius: 5px;
  108. width: auto;
  109. font-size: 14px;
  110. top: 4px;
  111. }
  112. .chatContentWrap .chatContentWrapList p::before{
  113. content: "";
  114. display: block;
  115. position: absolute;
  116. left: -7px;
  117. top: 29%;
  118. background-color: transparent;
  119. width: 0;
  120. height: 0;
  121. border-top: 7px solid transparent;
  122. border-right: 7px solid #fff;
  123. border-bottom: 7px solid transparent;
  124. }
  125. .single_chatObjectB p::before{
  126. border-top: 7px solid transparent;
  127. border-left: 7px solid #c5e7fc !important;
  128. border-bottom: 7px solid transparent;
  129. right: -6px !important;
  130. top: 12px;
  131. border-right: none !important;
  132. left: initial !important;
  133. }
  134. /*.chatContentWrap .chatContentWrapList p::after{
  135. content: "已读";
  136. display: block;
  137. position: absolute;
  138. right: -34px;
  139. color: #898989;
  140. top: 25%;
  141. }*/
  142. .single_chatObjectB p::after{
  143. left:-34px;
  144. }
  145. /*.chatContentWrap .chatContentWrapList p[class='singleHasRead']::after{
  146. content: "未读" !important;
  147. display: block;
  148. position: absolute;
  149. right: -34px;
  150. color: #898989;
  151. }*/
  152. .chatChoose{
  153. /*margin-right: 1%;*/
  154. }
  155. .chatChoose button{
  156. background-color: #5BABE6;
  157. color: #fff;
  158. border: none;
  159. border-radius: 0 4px 4px 0;
  160. padding: 0;
  161. width: 1.22rem;
  162. height: 34px;
  163. position: relative;
  164. }
  165. .chatActionModleWrap{
  166. /*height: 54px;*/
  167. /*background-image: linear-gradient(0deg, #fafafa, #fafafa 50%, #fafafa 50%);*/
  168. /*background-color: #fafafa;*/
  169. /*width: 20.5rem;*/
  170. /*margin: 0 auto;*/
  171. }
  172. .chatActionModleWrap .chatInput{
  173. background-color: #fff;
  174. border: 1px solid #e5e5e5;
  175. border-radius:4px 0 0 4px;
  176. width:8.22rem !important;
  177. margin: 0 0 0 1%;
  178. padding-left: 12px;
  179. position: relative;
  180. }
  181. .chatChoose .chatChooseButton{
  182. background: url("../img/chatChoose.png")no-repeat scroll 0 0;
  183. padding: 0;
  184. width: 32px;
  185. height: 100%;
  186. background-size: 100%;
  187. border: none;
  188. }
  189. .mailList{
  190. background: url(../img/mailList.svg)no-repeat scroll 50%;
  191. display: block;
  192. left: 14px;
  193. background-size: 75%;
  194. width: 30px;
  195. z-index: 99;
  196. }
  197. .searchFriend{
  198. background-color: #fff;
  199. display: block;
  200. width: calc(100% - 20px);
  201. margin: 0 auto;
  202. height: 30px;
  203. line-height: 30px;
  204. position: relative;
  205. top: 9px;
  206. border-radius: 4px;
  207. margin-bottom: 19px;
  208. }
  209. .searchFriend span{
  210. display: block;
  211. margin: 0 auto;
  212. width: auto;
  213. text-align: center;
  214. color: #a6a6a7;
  215. }
  216. .searchFriend span i{
  217. display: inline-block;
  218. width: 22px;
  219. height: 22px;
  220. vertical-align: middle;
  221. line-height: 22px;
  222. font-size: 19px;
  223. margin-right: 5px;
  224. }
  225. .chatMailCategoary{
  226. background-color: #fff;
  227. padding: 0 2.5%;
  228. }
  229. .chatMailCategoary li{
  230. height: 60px;
  231. line-height: 60px;
  232. vertical-align: middle;
  233. border-bottom: 1px solid #e6e6e7;
  234. }
  235. .chatMailCategoary li i:nth-child(1){
  236. width: 40px;
  237. height: 40px;
  238. display: inline-block;
  239. color: #fff;
  240. text-align: center;
  241. line-height: 40px;
  242. border-radius: 50%;
  243. font-size: 28px;
  244. vertical-align: middle;
  245. }
  246. .chatMailCategoary li .ion-ios-arrow-right{
  247. float: right;
  248. font-size: 21px;
  249. color: #a6a6a7;
  250. }
  251. .chatMailCategoary li:nth-child(1) i:nth-child(1){
  252. background-color: #6467f0;
  253. }
  254. .chatMailCategoary li:nth-child(2) i:nth-child(1){
  255. background-color: #6293e8;
  256. }
  257. .chatMailCategoary li:nth-child(3) i:nth-child(1){
  258. background-color: #3cb2f1;
  259. }
  260. .chatMailCategoary li:nth-child(4) i:nth-child(1){
  261. background-color: #52c3ab;
  262. }
  263. .relatePAction{
  264. height: 30px;
  265. line-height: 30px;
  266. padding-left: 3%;
  267. color: #848585;
  268. font-size: 14px;
  269. margin: 0;
  270. }
  271. .rj-list .list {
  272. width: 90%;
  273. margin-left: 13px;
  274. margin-right: auto;
  275. margin-top: -1px;
  276. }
  277. .rj-contacts-index-bar {
  278. background-color:#f2f2f2;
  279. padding-left:13px;
  280. height: 20px;
  281. line-height: 20px;
  282. font-size: 80%;
  283. color: #545454;
  284. }
  285. .rj-contacts-middle-bar {
  286. position: fixed;
  287. margin: auto;
  288. left: 0;
  289. top: 0;
  290. right: 0;
  291. bottom: 0;
  292. height: 60px;
  293. width: 60px;
  294. line-height: 60px;
  295. text-align: center;
  296. color: #FFF;
  297. font-size: 300%;
  298. background-color: rgba(0, 0, 0, 0.5);
  299. }
  300. .rj-list .list .rj-item {
  301. border-left: none;
  302. border-right: none;
  303. border-top: none;
  304. padding-left: 0;
  305. padding-top: 6px;
  306. padding-bottom: 6px;
  307. }
  308. .rj-contacts-right-bar {
  309. position: absolute;
  310. right: 10px;
  311. width: 20px;
  312. z-index: 2;
  313. text-align: center;
  314. font-size: 80%;
  315. color: #545454;
  316. top:0;
  317. bottom: 0;
  318. margin: auto 0;
  319. }
  320. .disable-user-behavior {
  321. -webkit-user-select: none;
  322. -moz-user-select: none;
  323. -ms-user-select: none;
  324. user-select: none;
  325. -webkit-touch-callout: none;
  326. -webkit-tap-highlight-color: transparent;
  327. -webkit-tap-highlight-color: transparent;
  328. -webkit-user-drag: none;
  329. -ms-touch-action: none;
  330. -ms-content-zooming: none;
  331. }
  332. .rj-item .rj-contacts-pic {
  333. color: white;
  334. height: 36px;
  335. width: 36px;
  336. line-height: 36px;
  337. float: left;
  338. font-size: 28px;
  339. text-align: center;
  340. }
  341. .rj-contacts-pic img {
  342. width: 40px;
  343. height: 40px;
  344. -webkit-user-drag: none;
  345. border-radius: 50%;
  346. -webkit-border-radius: 50%;
  347. }
  348. .rj-contacts-right-bar div {
  349. height: 20px;
  350. line-height: 20px;
  351. }
  352. .rj-contacts-item{
  353. background-color: #fff;
  354. padding: 0;
  355. border: none;
  356. }
  357. .rj-item h2 {
  358. padding-left: 10px;
  359. position: absolute;
  360. margin: auto !important;
  361. top: 0;
  362. bottom: 0;
  363. left: 36px;
  364. height: 32px;
  365. line-height: 32px;
  366. }
  367. .chatSearchBar{
  368. background-color: #fff;
  369. height: 35px;
  370. line-height: 35px;
  371. color: #888888;
  372. font-size: 12px;
  373. padding-left: 5%;
  374. }
  375. .chatSearchItem{
  376. margin-bottom: 12px;
  377. border: none;
  378. }
  379. .chatSearchItem .rj-item{
  380. padding-left: 3px !important;
  381. height: 75px;
  382. }
  383. .chatSearchItem .rj-item .rj-contacts-pic{
  384. height: 100%;
  385. width: 66px;
  386. }
  387. .chatSearchItem .rj-contacts-pic img{
  388. width: 51px !important;
  389. height: 51px !important;
  390. border-radius: 50%;
  391. vertical-align: -webkit-baseline-middle;
  392. }
  393. .chatSearchItem .rj-item h2{
  394. margin-left: 8% !important;
  395. float: left;
  396. }
  397. .rj-item .scienceChatsItem{
  398. border-bottom: none;
  399. }
  400. .chatMailAdd{
  401. font-size: 25px !important;
  402. right:0;
  403. background:transparent url("../img/svg/chatMailAdd.svg")no-repeat scroll 50%;
  404. background-size: 45%;
  405. }
  406. .addChatFriendList{
  407. width: 100%;
  408. height: 35px;
  409. line-height: 35px;
  410. padding-left:4%;
  411. }
  412. .addChatFriendList .ion-ios-search{
  413. color: #3f8ee2;
  414. font-size: 20px;
  415. font-weight: bold;
  416. }
  417. .addChatFriendList_span{
  418. color: #cccccc;
  419. vertical-align: top;
  420. padding-left: 10px;
  421. }
  422. .addFriendItem{
  423. height: 60px;
  424. padding: 0 2%;
  425. }
  426. .addFriendItem:last-child{
  427. border:none;
  428. }
  429. .addFriendItem .rj-contacts-pic{
  430. height: 100%;
  431. line-height: 50px;
  432. }
  433. .addFriendItem .rj-contacts-pic img{
  434. vertical-align: middle;
  435. }
  436. .addFriendItem h2{
  437. padding-left: 5%;
  438. }
  439. .rj-add-button li{
  440. width: 90%;
  441. display: block;
  442. height: 38px;
  443. line-height: 38px;
  444. background-color: #108ee9;
  445. margin: 12px auto;
  446. text-align: center;
  447. color: #fff;
  448. border-radius: 4px;
  449. -webkit-border-radius: 4px;
  450. letter-spacing: 2px;
  451. }
  452. .rj-add-button li:nth-child(2){
  453. background-color: #fff;
  454. color: #108ee9;
  455. border: 1px solid #108ee9;
  456. }
  457. .single_chatObject{
  458. height: auto;
  459. overflow: hidden;
  460. padding-bottom: 35px;
  461. }
  462. .singleChatModeAddBottom{
  463. bottom: 54px;
  464. }
  465. .searchHomeChatWrapFloor{
  466. background-color: #f2f2f2;
  467. height: auto;
  468. overflow: hidden;
  469. padding: 7px 2px;
  470. }
  471. .searchHomeChatWrapFloor .searchFriend{
  472. top: 0 !important;
  473. margin-bottom: 0 !important;
  474. }
  475. .empty_discussDatelist{
  476. display: block;
  477. height: 100px;
  478. width: 108px;
  479. position: relative;
  480. margin: 0 auto;
  481. background: url("../img/empty_discussDatelist.svg")no-repeat scroll 50% 70%;
  482. background-size: 80%;
  483. }