index.css 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. @charset "utf-8";
  2. /* base */
  3. html,body {height:100%; width:100%; overflow:hidden;}
  4. /* color */
  5. .c-787878 { color:#787878;}
  6. .c-f47979 { color:#f47979;}
  7. .c-fff {color:#fff;}
  8. .c-333 {color:#333;}
  9. .c-ff707a {color:#ff707a;}
  10. .bg-e0e3ec {background-color:#e0e3ec;}
  11. .bg-50bfff {background-color:#50bfff;}
  12. .bg-2bdac7 {background-color:#2bdac7;}
  13. .bg-7ad140 {background-color:#7ad140;}
  14. .bg-ff707a {background-color:#ff707a;}
  15. /* header-wrap */
  16. .header-wrap {height:50px; line-height:50px; background-color:#3c4a55; box-shadow:0 0px 0px #ccc; z-index:1010}
  17. .header-menu-arrow {display:inline-block; width:24px; height:24px; background-color:#33414b; position:relative; top:2px; line-height:24px; cursor:pointer}
  18. .header-menu-arrow i {font-size:12px}
  19. .header-menu-box {top:51px; left:20px; background-color:#fff; min-width:140px; border:1px solid #ededed; display:none; z-index:1011}
  20. .header-menu-box li a {border-bottom:1px solid #ededed; display:block; line-height:42px; padding:0 15px; color:#666}
  21. .header-menu-box li a:hover {background-color:#f5f9fc}
  22. .header-menu-box li:last-child a {border-bottom:0}
  23. .header-feature li {float:left; display:inline-block;}
  24. .header-feature li a {display:block; height:50px; width:50px; text-align:center; position:relative}
  25. .header-feature li a:hover ,.header-feature li a.curr {background-color:#40d0a7;}
  26. .header-feature li a i.iconfont {color:#fff; font-size:20px;}
  27. .header-feature li a em {position:absolute; top:8px; right:5px; width:18px; height:18px; background-color:#f47979; border-radius:50%; line-height:18px; color:#fff}
  28. /* iframe-menu */
  29. .iframe-menu {border-bottom:#e0e3ec 1px solid; background-color:#f4f5f6; height:37px;}
  30. .iframe-menu-list {left:0; top:0}
  31. .iframe-menu-list li {float:left; display:inline}
  32. .iframe-menu-list li a {display:inline-block; width:180px; height:38px; line-height:38px; position:relative; font-size:14px; color:#666; border-right:#e0e3ec 0px solid; overflow:hidden;}
  33. .iframe-menu-list li a span {display:block; background-color:#f4f5f7; padding-left:20px; position:relative; width:130px}
  34. .iframe-menu-list li a.curr {color:#fff}
  35. .iframe-menu-list li a.curr span {background-color:#40d0a7; height:41px; width:228px; top:0px; left:0px; line-height:41px;}
  36. .iframe-menu-list li a i.iconfont {position:absolute; right:10px; top:0px; font-size:12px;}
  37. .iframe-menu-btn {right:0; top:0; display:none}
  38. .iframe-menu-btn a {display:inline-block; width:37px; height:37px; border-left:#e0e3ec 1px solid; background-color:#fff; text-align:center; line-height:37px; color:#333}
  39. .iframe-menu-btn a:hover {background-color:#40d0a7; color:#fff;}
  40. .iframe-menu-mouse {width:160px; border:1px solid #e0e3ec; box-shadow:1px 1px 5px #ccc; background-color:#fff; font-size:14px}
  41. .iframe-menu-mouse li {border-bottom:#e0e3ec 1px solid;}
  42. .iframe-menu-mouse li a {height:32px; line-height:32px; padding:0 10px; color:#333; display:block; }
  43. .iframe-menu-mouse li:last-child {border-bottom:0}
  44. .iframe-menu-mouse li a:hover {background-color:#40d0a7; color:#fff;}
  45. /* boss-im */
  46. .boss-im {top:50px; right:-275px; height:100%; width:275px; z-index:1031;}
  47. .boss-im-arrow {top:50%; margin-top:-32px; left:-15px; width:15px; height:66px; background:url(../images/arrow.png) no-repeat; cursor:pointer; z-index:1033}
  48. .boss-im-arrow i.iconfont {color:#40d0a7;-webkit-transform:scale(0.6); font-size:10px; display:inline-block; position:relative; top:22px; left:4px}
  49. .boss-im-box {background-color:#fff; width:261px; height:100%; top:0; left:14px; z-index:1002; box-shadow:2px 0 5px #ccc; overflow:hidden}
  50. .boss-im-header {background-color:#40d0a7; height:105px;}
  51. .im-my-head {width:63px; height:63px; border-radius:50%; overflow:hidden; border:#6ddbbc 2px solid; top:20px; left:20px}
  52. .im-my-head img {width:100%; height:100%}
  53. .im-my-info {top:25px; left:100px;}
  54. /*.boss-im-box {background-color:#fff; width:261px; height:100%; top:0; left:14px; z-index:1002; box-shadow:2px 0 5px #ccc; overflow:hidden} */
  55. .boss-im-box {
  56. background-color: #fff;
  57. width: 261px;
  58. height: 100%;
  59. top: 0;
  60. left: 14px;
  61. z-index: 1002;
  62. box-shadow: -2px 0 2px #ccc;
  63. overflow: hidden;
  64. }
  65. .boss-im-header {background-color:#40d0a7; height:105px;}
  66. .im-my-head {width:63px; height:63px; border-radius:50%; overflow:hidden; border:#6ddbbc 2px solid; top:20px; left:20px}
  67. .im-my-head img {width:100%; height:100%}
  68. .im-my-info {top:25px; left:100px;}
  69. .boss-im-search {background-color:#fff; height:37px; line-height:37px; cursor:text}
  70. .im-search-box {background-color:#3bc09a}
  71. .im-search-box input {background-color:#3bc09a; border:0; height:24px; width:240px; margin-left:5px; padding-left:10px; color:#fff; }
  72. .im-search-box input.focus {background-color:#fff; color:#909090;}
  73. .im-search-btn {top:0px; right:10px; cursor:pointer; display:none;}
  74. .im-search-btn i.iconfont {font-size:18px}
  75. .im-search-close {top:-1px; right:30px; cursor:pointer; display:none;}
  76. .im-search-close i.iconfont {font-size:14px}
  77. .search-scroll , .im-main-search {overflow:hidden}
  78. .im-main-search , .im-menu-box , .im-user-box , .im-main-mine , .im-main-apps {display:none;}
  79. .im-main-search , .im-main-mine , .im-main-apps {background-color:#fff; z-index:1045;}
  80. .im-menu-bd , .im-main-box {height:100%;}
  81. .im-menu-box.curr , .im-user-box.curr {display:block}
  82. .im-menu-hd {height:50px; border-top:#dedede 1px solid; bottom:0; left:0}
  83. .im-menu-hd a {display:inline-block; width:33.33%; text-align:center}
  84. .im-menu-hd a span {display:block; color:#3c4a55;}
  85. .im-menu-hd a i.iconfont {font-size:20px; color:#768088; margin-top:5px}
  86. .im-menu-hd a:hover span , .im-menu-hd a:hover i.iconfont {color:#40d0a7;}
  87. .im-menu-hd a.curr {background-color:#3c4a55}
  88. .im-menu-hd a.curr span , .im-menu-hd a.curr i.iconfont {color:#fff}
  89. .im-user-hd {border-bottom:1px solid #dedede; height:33px;}
  90. .im-user-hd a {display:inline-block; width:33.33%; text-align:center; line-height:33px; color:#333; position:relative}
  91. .im-user-hd a:hover {color:#3bc09a}
  92. .im-user-hd a.curr {border-bottom:2px solid #3bc09a; line-height:31px}
  93. .im-mine li , .im-user-group li {position:relative; padding-left:30px; margin-top:30px;}
  94. .im-mine-icon {width:36px; height:36px; text-align:center}
  95. .im-mine-icon i.iconfont , .im-user-icon i.iconfont {font-size:36px; color:#fff; line-height:36px;}
  96. .im-mine-text , .im-user-text {padding-left:50px; height:36px; line-height:36px; color:#333;}
  97. a:hover .im-mine-text , a:hover .im-user-text {color:#40d0a7;}
  98. .im-user-icon , .im-user-img {width:38px; height:38px; overflow:hidden;}
  99. .im-user-key {padding:8px 15px}
  100. .im-apply li {margin-bottom:20px;}
  101. .im-apply-img {width:50px; height:50px; display:inline-block; border-radius:50%; overflow:hidden}
  102. .im-apply-iconfont {padding-bottom:4px; display:inline-block;}
  103. .im-apply-iconfont i.iconfont {font-size:50px; line-height:1; color:#c2c2c2;}
  104. .im-apply-text {margin-top:10px;height:38px; display:block; color:#333;}
  105. .im-apply li a {display:block;}
  106. .im-apply li a:hover .im-apply-text {color:#40d0a7;}
  107. .boss-user-face , .im-apps-logo {width:38px; height:38px; border-radius:50%; overflow:hidden; display:inline-block; position:absolute; left:10px; top:8px;}
  108. .boss-user-name , .im-apps-name {display:inline-block; height:38px; line-height:38px; padding-right:20px; padding-left:60px; max-width:60%; position:relative; top:5px}
  109. .boss-user-number {right:20px; top:18px; width:18px; height:18px; background-color:#f47979; border-radius:50%; line-height:18px; color:#fff; text-align:center}
  110. .boss-user , .im-apps li {margin-bottom:10px;}
  111. .boss-user a , .im-apps li a {display:block; padding:5px 0 10px; position:relative; }
  112. .boss-user a.curr {background-color:#40d0a7;}
  113. .boss-user a:hover .boss-user-name , .im-apps li a:hover .im-apps-name {color:#40d0a7;}
  114. .boss-user a.curr .boss-user-name {color:#fff;}
  115. .tidings-scroll .boss-user-name , .im-apps .im-apps-name {line-height:16px;}
  116. .tidings-scroll .boss-user-time , .im-apps .im-apps-add {right:20px; top:8px;}
  117. .im-apps .im-apps-add {color:#40d0a7;}
  118. .tidings-scroll .boss-user-number {top:25px;}
  119. .tidings-scroll .boss-user a:hover .boss-user-name p {color:#40d0a7;}
  120. .tidings-scroll .boss-user a.curr .boss-user-name p , .tidings-scroll .boss-user a.curr .boss-user-time{color:#fff;}
  121. .im-apps-title .title {max-width:85px; display:inline-block;}
  122. .im-apps-title .group {display: inline-block; background: #f60; color: #fff; padding: 0 5px; border-radius: 2px; margin-left: 5px; position:relative; top:-2px;}
  123. .im-user-tree li div.tree-hd {padding-left:15px}
  124. .im-user-tree li li div.tree-hd {padding-left:30px}
  125. .im-user-tree li li li div.tree-hd {padding-left:45px}
  126. .im-user-tree li li li li div.tree-hd {padding-left:60px}
  127. .im-user-tree li li li li li div.tree-hd {padding-left:75px}
  128. .im-user-tree li li li li li li div.tree-hd {padding-left:90px}
  129. .im-user-tree li li li li li li li div.tree-hd {padding-left:105px}
  130. .im-user-tree li ul {display:none}
  131. .im-user-tree li div.tree-hd a {display:block; height:38px; line-height:38px; width:100%;}
  132. .im-user-tree li div.tree-hd a i.iconfont {font-size:12px; position:relative; top:-1px; color:#333}
  133. .im-user-tree li div.tree-hd a span {color:#333; display:inline-block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; width:90%; position:relative; top:14px;}
  134. .im-user-tree li div.tree-hd a:hover span , .im-user-tree li div.tree-hd a:hover i.iconfont{color:#40d0a7}
  135. .tree-bd {margin-bottom:10px}
  136. .tree-bd a .tree-bd-box {padding:8px 0;}
  137. .tree-bd-face {width:38px; height:38px; display:inline-block; overflow:hidden; border-radius:50%; position:absolute; top:10px;}
  138. .tree-bd-name {display:inline-block; height:38px; line-height:38px; padding-right:20px; padding-left:50px; max-width:50%; position:relative; top:5px}
  139. .tree-bd-number {right:10px; top:22px; width:18px; height:18px; background-color:#f47979; border-radius:50%; line-height:18px; color:#fff; text-align:center}
  140. .tree-bd a.curr .tree-bd-box {background:#40d0a7}
  141. .tree-bd a:hover .tree-bd-name {color:#40d0a7}
  142. .tree-bd a.curr .tree-bd-name {color:#fff}
  143. #iframe-im {width:500px; right:260px; z-index:1110; display:none; box-shadow:1px 2px 5px #999;}
  144. .iframe-im-close a i.iconfont{color:#a9aaaa; font-size:20px}
  145. .iframe-im-close {right:10px; top:10px;}