popup.css 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354
  1. .pop-over {
  2. background: #fff;
  3. border-radius: 3px;
  4. border: 1px solid #dbdbdb;
  5. border-bottom-color: #c2c2c2;
  6. box-shadow: 0 1px 6px rgba(0,0,0,0.3);
  7. position: absolute;
  8. width: 300px;
  9. z-index: 99999;
  10. margin-top: 5px;
  11. }
  12. .pop-over hr {
  13. margin: 4px 0px;
  14. }
  15. .pop-over p,
  16. .pop-over textarea,
  17. .pop-over input[type="text"],
  18. .pop-over input[type="email"],
  19. .pop-over input[type="password"],
  20. .pop-over input[type="file"] {
  21. width: 100%;
  22. }
  23. .pop-over select {
  24. width: 100%;
  25. margin-bottom: 14px;
  26. }
  27. .pop-over textarea {
  28. height: 72px;
  29. }
  30. .pop-over form a span {
  31. padding: 0 0.5rem;
  32. }
  33. .pop-over .header {
  34. height: 36px;
  35. position: relative;
  36. margin-bottom: 8px;
  37. background: #f7f7f7;
  38. border-bottom: 1px solid #dcdcdc;
  39. color: #666;
  40. }
  41. .pop-over .header .header-title {
  42. display: block;
  43. line-height: 32px;
  44. padding-top: 4px;
  45. margin: 0 10px;
  46. font-weight: bold;
  47. overflow: hidden;
  48. text-overflow: ellipsis;
  49. white-space: nowrap;
  50. }
  51. .pop-over .header .back-btn {
  52. float: left;
  53. overflow: hidden;
  54. width: 30px;
  55. transition: width 0.2s;
  56. }
  57. .pop-over .header .back-btn i.fa {
  58. margin: 10px;
  59. margin-top: 12px;
  60. }
  61. .pop-over .header .back-btn.is-hidden {
  62. width: 0;
  63. }
  64. .pop-over .header .close-btn {
  65. padding: 10px 10px 10px 4px;
  66. position: absolute;
  67. top: 0;
  68. right: 0;
  69. }
  70. .pop-over.no-title .header {
  71. background: none;
  72. }
  73. .pop-over .content-wrapper {
  74. width: 100%;
  75. overflow: hidden;
  76. }
  77. .pop-over .content-container {
  78. width: 5000px;
  79. max-height: 550px;
  80. transition: transform 0.2s;
  81. }
  82. .pop-over .content-container .content {
  83. width: 280px;
  84. padding: 0 10px 10px;
  85. float: left;
  86. }
  87. .pop-over .content-container .content.no-height {
  88. height: 20px;
  89. }
  90. .pop-over .quiet {
  91. /* padding: 6px 6px 4px;*/
  92. }
  93. .pop-over.search-over {
  94. background: #f0f0f0;
  95. min-height: 114px;
  96. }
  97. .pop-over.search-over .header {
  98. display: none;
  99. }
  100. .pop-over.search-over .content {
  101. padding: 8px 4px 8px 10px;
  102. margin-right: 8px;
  103. }
  104. .pop-over .at-form .at-error,
  105. .pop-over .at-form .at-result {
  106. padding: 8px 12px;
  107. margin: -8px -10px 10px;
  108. }
  109. .pop-over .at-form .at-error {
  110. background: #ef9a9a;
  111. }
  112. .pop-over .at-form .at-result {
  113. background: #b2dfdb;
  114. }
  115. .pop-over .sk-spinner {
  116. margin: 40px auto;
  117. }
  118. .pop-over .popup-container-depth-1 {
  119. transform: translateX(-300px);
  120. }
  121. .pop-over .popup-container-depth-2 {
  122. transform: translateX(-600px);
  123. }
  124. .pop-over .popup-container-depth-3 {
  125. transform: translateX(-900px);
  126. }
  127. .pop-over .popup-container-depth-4 {
  128. transform: translateX(-1200px);
  129. }
  130. .pop-over .popup-container-depth-5 {
  131. transform: translateX(-1500px);
  132. }
  133. .pop-over .popup-container-depth-6 {
  134. transform: translateX(-1800px);
  135. }
  136. .select-members-list,
  137. .select-avatars-list {
  138. margin-bottom: 8px;
  139. }
  140. .pop-over-list li {
  141. display: block;
  142. clear: both;
  143. }
  144. .pop-over-list li > a {
  145. clear: both;
  146. cursor: pointer;
  147. display: block;
  148. font-weight: 700;
  149. padding: 1.5px 10px;
  150. position: relative;
  151. margin: 0 -10px;
  152. text-decoration: none;
  153. overflow: hidden;
  154. line-height: 33px;
  155. display:flex;
  156. /* flex-wrap:wrap;*/
  157. gap:5px;
  158. align-items: center;
  159. }
  160. .pop-over-list li > a > .member{
  161. align-self: flex-start;
  162. flex:0 0 auto;
  163. }
  164. .pop-over-list li > a .item-name {
  165. display: block;
  166. width: auto;
  167. padding-right: 22px;
  168. }
  169. .pop-over-list li > a:not(.disabled):hover {
  170. background-color: #005377;
  171. color: #fff;
  172. }
  173. .pop-over-list li > a:not(.disabled):hover .sub-name,
  174. .pop-over-list li > a:not(.disabled):hover .quiet {
  175. color: #eee;
  176. }
  177. .pop-over-list li > a:not(.disabled):hover .unread-indicator {
  178. background: #fff;
  179. }
  180. .pop-over-list li > a .sub-name {
  181. color: #8c8c8c;
  182. display: block;
  183. font-size: 12px;
  184. font-weight: 400;
  185. line-height: 15px;
  186. }
  187. .pop-over-list li > a.current {
  188. background-color: #e2e6e9;
  189. }
  190. .pop-over-list li > a:active {
  191. background-color: #2e85b8;
  192. }
  193. .pop-over-list li > a.disabled {
  194. color: #8c8c8c;
  195. cursor: default;
  196. }
  197. .pop-over-list li > a.disabled .vis-icon {
  198. opacity: 0.35;
  199. }
  200. .pop-over-list li > a.disabled:hover {
  201. background: none;
  202. }
  203. .pop-over-list li > a.disabled:hover .sub-name,
  204. .pop-over-list li > a.disabled:hover .quiet {
  205. color: #8c8c8c;
  206. }
  207. .pop-over-list li > a.disabled:active {
  208. background: none;
  209. }
  210. .pop-over-list.inset li > a {
  211. border-radius: 3px;
  212. margin: 0;
  213. }
  214. .pop-over-list .pop-over-list.checkable .fa-check {
  215. display: none;
  216. position: absolute;
  217. top: 6px;
  218. right: 12px;
  219. }
  220. .pop-over-list .pop-over-list.checkable li.active a {
  221. padding-right: 28px;
  222. }
  223. .pop-over-list .pop-over-list.checkable li.active a .fa-check {
  224. display: block;
  225. }
  226. .pop-over.miniprofile .header {
  227. border-bottom-color: transparent;
  228. height: 30px;
  229. position: absolute;
  230. right: 0;
  231. top: 0;
  232. width: 60px;
  233. z-index: 1;
  234. }
  235. .pop-over.miniprofile .header-title {
  236. display: none;
  237. }
  238. .pop-over.miniprofile .pop-over-list {
  239. padding-top: 8px;
  240. }
  241. .pop-over.miniprofile .miniprofile-header {
  242. margin-top: 8px;
  243. min-height: 56px;
  244. position: relative;
  245. }
  246. .pop-over.miniprofile .miniprofile-header .member,
  247. .pop-over.miniprofile .miniprofile-header .avatar {
  248. position: absolute;
  249. top: 2px;
  250. left: 2px;
  251. height: 50px;
  252. width: 50px;
  253. }
  254. .pop-over.miniprofile .miniprofile-header .info {
  255. margin: 0 0 0 64px;
  256. word-wrap: break-word;
  257. }
  258. .pop-over.miniprofile .miniprofile-header .info h3 a {
  259. text-decoration: none;
  260. }
  261. .pop-over.miniprofile .miniprofile-header .info h3 a:hover {
  262. text-decoration: underline;
  263. }
  264. @media screen and (max-width: 800px) {
  265. .pop-over {
  266. width: 100%;
  267. height: 100%;
  268. overflow: hidden;
  269. margin-top: 0px;
  270. border: 0px solid #dbdbdb;
  271. }
  272. .pop-over .header {
  273. color: #fff;
  274. background: #2980b9;
  275. height: 48px;
  276. padding: 0px 0px;
  277. border: 0px;
  278. margin: 0px 0px;
  279. width: 100%;
  280. position: absolute;
  281. top: 0px;
  282. }
  283. .pop-over .header .header-title {
  284. font-size: 20px;
  285. font-weight: normal;
  286. padding-top: 8px;
  287. }
  288. .pop-over .header .back-btn {
  289. width: 30px;
  290. padding: 8px 12px 8px 12px;
  291. }
  292. .pop-over .header .back-btn i.fa {
  293. color: #fff;
  294. }
  295. .pop-over .header .close-btn {
  296. padding: 10px 12px;
  297. }
  298. .pop-over .header .close-btn i.fa {
  299. font-size: 24px;
  300. color: #fff;
  301. }
  302. .pop-over .content-wrapper {
  303. width: 100%;
  304. height: calc(100% - 48px);
  305. overflow-y: scroll;
  306. overflow-x: hidden;
  307. margin: 48px 0px 0px 0px;
  308. }
  309. .pop-over .content-container {
  310. width: 1000%;
  311. height: 100%;
  312. max-height: 100%;
  313. }
  314. .pop-over .content-container .content {
  315. width: calc(10% - 20px);
  316. height: calc(100% - 20px);
  317. padding: 10px;
  318. }
  319. .pop-over .content-container .content form {
  320. margin: 10px 10px;
  321. width: calc(100% - 20px);
  322. }
  323. .pop-over .content-container .content p,
  324. .pop-over .content-container .content textarea,
  325. .pop-over .content-container .content input[type="text"],
  326. .pop-over .content-container .content input[type="email"],
  327. .pop-over .content-container .content input[type="password"],
  328. .pop-over .content-container .content input[type="file"] {
  329. width: 100%;
  330. box-sizing: border-box;
  331. }
  332. .pop-over .pop-over-list li > a {
  333. width: calc(100% - 20px);
  334. margin: 0px 0px;
  335. }
  336. .pop-over .popup-container-depth-1 {
  337. transform: translateX(-10%);
  338. }
  339. .pop-over .popup-container-depth-2 {
  340. transform: translateX(-20%);
  341. }
  342. .pop-over .popup-container-depth-3 {
  343. transform: translateX(-30%);
  344. }
  345. .pop-over .popup-container-depth-4 {
  346. transform: translateX(-40%);
  347. }
  348. .pop-over .popup-container-depth-5 {
  349. transform: translateX(-50%);
  350. }
  351. .pop-over .popup-container-depth-6 {
  352. transform: translateX(-60%);
  353. }
  354. }