messenger.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437
  1. [data-action="retry"] {
  2. display:none;
  3. }
  4. ul.messenger.messenger-fixed.messenger-on-top {
  5. top: 10px;
  6. }
  7. ul.messenger {
  8. margin: 0;
  9. padding: 0;
  10. }
  11. ul.messenger > li {
  12. list-style: none;
  13. margin: 0;
  14. padding: 0;
  15. }
  16. ul.messenger.messenger-empty {
  17. display: none;
  18. }
  19. ul.messenger .messenger-message {
  20. overflow: hidden;
  21. *zoom: 1;
  22. }
  23. ul.messenger .messenger-message.messenger-hidden {
  24. display: none;
  25. }
  26. ul.messenger .messenger-message .messenger-phrase, ul.messenger .messenger-message .messenger-actions a {
  27. padding-right: 5px;
  28. }
  29. ul.messenger .messenger-message .messenger-actions {
  30. float: right;
  31. }
  32. ul.messenger .messenger-message .messenger-actions a {
  33. cursor: pointer;
  34. text-decoration: underline;
  35. }
  36. ul.messenger .messenger-message ul, ul.messenger .messenger-message ol {
  37. margin: 10px 18px 0;
  38. }
  39. ul.messenger.messenger-fixed {
  40. position: fixed;
  41. z-index: 10000;
  42. }
  43. ul.messenger.messenger-fixed .messenger-message {
  44. min-width: 0;
  45. -webkit-box-sizing: border-box;
  46. -moz-box-sizing: border-box;
  47. box-sizing: border-box;
  48. }
  49. ul.messenger.messenger-fixed .message .messenger-actions {
  50. float: left;
  51. }
  52. ul.messenger.messenger-fixed.messenger-on-bottom {
  53. bottom: 20px;
  54. }
  55. ul.messenger.messenger-fixed.messenger-on-top.messenger-on-left, ul.messenger.messenger-fixed.messenger-on-bottom.messenger-on-left {
  56. left: 20px;
  57. margin-left: 0px;
  58. }
  59. ul.messenger.messenger-fixed.messenger-on-right, ul.messenger.messenger-fixed.messenger-on-left {
  60. width: 350px;
  61. }
  62. ul.messenger.messenger-fixed.messenger-on-right .messenger-actions, ul.messenger.messenger-fixed.messenger-on-left .messenger-actions {
  63. float: left;
  64. }
  65. ul.messenger .messenger-spinner {
  66. display: none;
  67. }
  68. @-webkit-keyframes ui-spinner-rotate-right {
  69. 0% {
  70. -webkit-transform: rotate(0deg);
  71. }
  72. 25% {
  73. -webkit-transform: rotate(180deg);
  74. }
  75. 50% {
  76. -webkit-transform: rotate(180deg);
  77. }
  78. 75% {
  79. -webkit-transform: rotate(360deg);
  80. }
  81. 100% {
  82. -webkit-transform: rotate(360deg);
  83. }
  84. }
  85. @-moz-keyframes ui-spinner-rotate-right {
  86. 0% {
  87. -moz-transform: rotate(0deg);
  88. }
  89. 25% {
  90. -moz-transform: rotate(180deg);
  91. }
  92. 50% {
  93. -moz-transform: rotate(180deg);
  94. }
  95. 75% {
  96. -moz-transform: rotate(360deg);
  97. }
  98. 100% {
  99. -moz-transform: rotate(360deg);
  100. }
  101. }
  102. @keyframes ui-spinner-rotate-right {
  103. 0% {
  104. transform: rotate(0deg);
  105. }
  106. 25% {
  107. transform: rotate(180deg);
  108. }
  109. 50% {
  110. transform: rotate(180deg);
  111. }
  112. 75% {
  113. transform: rotate(360deg);
  114. }
  115. 100% {
  116. transform: rotate(360deg);
  117. }
  118. }
  119. @keyframes ui-spinner-rotate-left {
  120. 0% {
  121. transform: rotate(0deg);
  122. }
  123. 25% {
  124. transform: rotate(0deg);
  125. }
  126. 50% {
  127. transform: rotate(180deg);
  128. }
  129. 75% {
  130. transform: rotate(180deg);
  131. }
  132. 100% {
  133. transform: rotate(360deg);
  134. }
  135. }
  136. @-moz-keyframes ui-spinner-rotate-left {
  137. 0% {
  138. -moz-transform: rotate(0deg);
  139. }
  140. 25% {
  141. -moz-transform: rotate(0deg);
  142. }
  143. 50% {
  144. -moz-transform: rotate(180deg);
  145. }
  146. 75% {
  147. -moz-transform: rotate(180deg);
  148. }
  149. 100% {
  150. -moz-transform: rotate(360deg);
  151. }
  152. }
  153. @-webkit-keyframes ui-spinner-rotate-left {
  154. 0% {
  155. -webkit-transform: rotate(0deg);
  156. }
  157. 25% {
  158. -webkit-transform: rotate(0deg);
  159. }
  160. 50% {
  161. -webkit-transform: rotate(180deg);
  162. }
  163. 75% {
  164. -webkit-transform: rotate(180deg);
  165. }
  166. 100% {
  167. -webkit-transform: rotate(360deg);
  168. }
  169. }
  170. .messenger-spinner {
  171. position: relative;
  172. border-radius: 100%;
  173. }
  174. ul.messenger.messenger-spinner-active .messenger-spinner .messenger-spinner {
  175. display: block;
  176. }
  177. .messenger-spinner .messenger-spinner-side {
  178. width: 50%;
  179. height: 100%;
  180. overflow: hidden;
  181. position: absolute;
  182. }
  183. .messenger-spinner .messenger-spinner-side .messenger-spinner-fill {
  184. border-radius: 999px;
  185. position: absolute;
  186. width: 100%;
  187. height: 100%;
  188. -webkit-animation-iteration-count: infinite;
  189. -moz-animation-iteration-count: infinite;
  190. -ms-animation-iteration-count: infinite;
  191. -o-animation-iteration-count: infinite;
  192. animation-iteration-count: infinite;
  193. -webkit-animation-timing-function: linear;
  194. -moz-animation-timing-function: linear;
  195. -ms-animation-timing-function: linear;
  196. -o-animation-timing-function: linear;
  197. animation-timing-function: linear;
  198. }
  199. .messenger-spinner .messenger-spinner-side-left {
  200. left: 0;
  201. }
  202. .messenger-spinner .messenger-spinner-side-left .messenger-spinner-fill {
  203. left: 100%;
  204. border-top-left-radius: 0;
  205. border-bottom-left-radius: 0;
  206. -webkit-animation-name: ui-spinner-rotate-left;
  207. -moz-animation-name: ui-spinner-rotate-left;
  208. -ms-animation-name: ui-spinner-rotate-left;
  209. -o-animation-name: ui-spinner-rotate-left;
  210. animation-name: ui-spinner-rotate-left;
  211. -webkit-transform-origin: 0 50%;
  212. -moz-transform-origin: 0 50%;
  213. -ms-transform-origin: 0 50%;
  214. -o-transform-origin: 0 50%;
  215. transform-origin: 0 50%;
  216. }
  217. .messenger-spinner .messenger-spinner-side-right {
  218. left: 50%;
  219. }
  220. .messenger-spinner .messenger-spinner-side-right .messenger-spinner-fill {
  221. left: -100%;
  222. border-top-right-radius: 0;
  223. border-bottom-right-radius: 0;
  224. -webkit-animation-name: ui-spinner-rotate-right;
  225. -moz-animation-name: ui-spinner-rotate-right;
  226. -ms-animation-name: ui-spinner-rotate-right;
  227. -o-animation-name: ui-spinner-rotate-right;
  228. animation-name: ui-spinner-rotate-right;
  229. -webkit-transform-origin: 100% 50%;
  230. -moz-transform-origin: 100% 50%;
  231. -ms-transform-origin: 100% 50%;
  232. -o-transform-origin: 100% 50%;
  233. transform-origin: 100% 50%;
  234. }
  235. ul.messenger-theme-flat {
  236. -webkit-border-radius: 4px;
  237. -moz-border-radius: 4px;
  238. -ms-border-radius: 4px;
  239. -o-border-radius: 4px;
  240. border-radius: 4px;
  241. -moz-user-select: none;
  242. -webkit-user-select: none;
  243. -o-user-select: none;
  244. user-select: none;
  245. background: #404040;
  246. }
  247. ul.messenger-theme-flat.messenger-empty {
  248. display: none;
  249. }
  250. ul.messenger-theme-flat .messenger-message {
  251. -webkit-box-shadow: inset 0px 1px rgba(255, 255, 255, 0.13), inset 48px 0px 0px #292929;
  252. -moz-box-shadow: inset 0px 1px rgba(255, 255, 255, 0.13), inset 48px 0px 0px #292929;
  253. box-shadow: inset 0px 1px rgba(255, 255, 255, 0.13), inset 48px 0px 0px #292929;
  254. -webkit-border-radius: 0px;
  255. -moz-border-radius: 0px;
  256. -ms-border-radius: 0px;
  257. -o-border-radius: 0px;
  258. border-radius: 0px;
  259. position: relative;
  260. border: 0px;
  261. margin-bottom: 0px;
  262. font-size: 13px;
  263. background: transparent;
  264. color: #f0f0f0;
  265. font-weight: 500;
  266. padding: 10px 30px 13px 65px;
  267. }
  268. ul.messenger-theme-flat .messenger-message .messenger-close {
  269. position: absolute;
  270. top: 0px;
  271. right: 0px;
  272. color: #888888;
  273. opacity: 1;
  274. font-weight: bold;
  275. display: block;
  276. font-size: 20px;
  277. line-height: 20px;
  278. padding: 8px 10px 7px 7px;
  279. cursor: pointer;
  280. background: transparent;
  281. border: 0;
  282. -webkit-appearance: none;
  283. }
  284. ul.messenger-theme-flat .messenger-message .messenger-close:hover {
  285. color: #bbbbbb;
  286. }
  287. ul.messenger-theme-flat .messenger-message .messenger-close:active {
  288. color: #777777;
  289. }
  290. ul.messenger-theme-flat .messenger-message .messenger-actions {
  291. float: none;
  292. margin-top: 10px;
  293. }
  294. ul.messenger-theme-flat .messenger-message .messenger-actions a {
  295. -webkit-border-radius: 4px;
  296. -moz-border-radius: 4px;
  297. -ms-border-radius: 4px;
  298. -o-border-radius: 4px;
  299. border-radius: 4px;
  300. text-decoration: none;
  301. color: #aaaaaa;
  302. background: #2e2e2e;
  303. display: inline-block;
  304. padding: 10px;
  305. margin-right: 10px;
  306. padding: 4px 11px 6px;
  307. text-transform: capitalize;
  308. }
  309. ul.messenger-theme-flat .messenger-message .messenger-actions a:hover {
  310. color: #f0f0f0;
  311. background: #2e2e2e;
  312. }
  313. ul.messenger-theme-flat .messenger-message .messenger-actions a:active {
  314. background: #292929;
  315. color: #aaaaaa;
  316. }
  317. ul.messenger-theme-flat .messenger-message .messenger-actions .messenger-phrase {
  318. display: none;
  319. }
  320. ul.messenger-theme-flat .messenger-message .messenger-message-inner:before {
  321. -webkit-border-radius: 50%;
  322. -moz-border-radius: 50%;
  323. -ms-border-radius: 50%;
  324. -o-border-radius: 50%;
  325. border-radius: 50%;
  326. position: absolute;
  327. left: 17px;
  328. display: block;
  329. content: " ";
  330. top: 50%;
  331. margin-top: -8px;
  332. height: 13px;
  333. width: 13px;
  334. z-index: 20;
  335. }
  336. ul.messenger-theme-flat .messenger-message.alert-success .messenger-message-inner:before {
  337. background: #5fca4a;
  338. }
  339. ul.messenger-theme-flat .messenger-message.alert-info .messenger-message-inner:before {
  340. background: #61c4b8;
  341. }
  342. ul.messenger-theme-flat .messenger-message.alert-error .messenger-message-inner:before {
  343. background: #dd6a45;
  344. }
  345. ul.messenger-theme-flat .messenger-message.alert-error.messenger-retry-soon .messenger-spinner {
  346. width: 32px;
  347. height: 32px;
  348. background: transparent;
  349. }
  350. ul.messenger-theme-flat .messenger-message.alert-error.messenger-retry-soon .messenger-spinner .messenger-spinner-side .messenger-spinner-fill {
  351. background: #dd6a45;
  352. -webkit-animation-duration: 20s;
  353. -moz-animation-duration: 20s;
  354. -ms-animation-duration: 20s;
  355. -o-animation-duration: 20s;
  356. animation-duration: 20s;
  357. opacity: 1;
  358. }
  359. ul.messenger-theme-flat .messenger-message.alert-error.messenger-retry-soon .messenger-spinner:after {
  360. content: "";
  361. background: #292929;
  362. position: absolute;
  363. width: 26px;
  364. height: 26px;
  365. border-radius: 50%;
  366. top: 3px;
  367. left: 3px;
  368. display: block;
  369. }
  370. ul.messenger-theme-flat .messenger-message.alert-error.messenger-retry-later .messenger-spinner {
  371. width: 32px;
  372. height: 32px;
  373. background: transparent;
  374. }
  375. ul.messenger-theme-flat .messenger-message.alert-error.messenger-retry-later .messenger-spinner .messenger-spinner-side .messenger-spinner-fill {
  376. background: #dd6a45;
  377. -webkit-animation-duration: 600s;
  378. -moz-animation-duration: 600s;
  379. -ms-animation-duration: 600s;
  380. -o-animation-duration: 600s;
  381. animation-duration: 600s;
  382. opacity: 1;
  383. }
  384. ul.messenger-theme-flat .messenger-message.alert-error.messenger-retry-later .messenger-spinner:after {
  385. content: "";
  386. background: #292929;
  387. position: absolute;
  388. width: 26px;
  389. height: 26px;
  390. border-radius: 50%;
  391. top: 3px;
  392. left: 3px;
  393. display: block;
  394. }
  395. ul.messenger-theme-flat .messenger-message-slot.messenger-last .messenger-message {
  396. -webkit-border-radius: 4px 4px 0px 0px;
  397. -moz-border-radius: 4px 4px 0px 0px;
  398. -ms-border-radius: 4px 4px 0px 0px;
  399. -o-border-radius: 4px 4px 0px 0px;
  400. border-radius: 4px 4px 0px 0px;
  401. -webkit-box-shadow: inset 48px 0px 0px #292929;
  402. -moz-box-shadow: inset 48px 0px 0px #292929;
  403. box-shadow: inset 48px 0px 0px #292929;
  404. }
  405. ul.messenger-theme-flat .messenger-message-slot.messenger-first .messenger-message {
  406. -webkit-border-radius: 0px 0px 4px 4px;
  407. -moz-border-radius: 0px 0px 4px 4px;
  408. -ms-border-radius: 0px 0px 4px 4px;
  409. -o-border-radius: 0px 0px 4px 4px;
  410. border-radius: 0px 0px 4px 4px;
  411. -webkit-box-shadow: inset 0px 1px rgba(255, 255, 255, 0.13), inset 48px 0px 0px #292929;
  412. -moz-box-shadow: inset 0px 1px rgba(255, 255, 255, 0.13), inset 48px 0px 0px #292929;
  413. box-shadow: inset 0px 1px rgba(255, 255, 255, 0.13), inset 48px 0px 0px #292929;
  414. }
  415. ul.messenger-theme-flat .messenger-message-slot.messenger-first.messenger-last .messenger-message {
  416. -webkit-border-radius: 4px;
  417. -moz-border-radius: 4px;
  418. -ms-border-radius: 4px;
  419. -o-border-radius: 4px;
  420. border-radius: 4px;
  421. -webkit-box-shadow: inset 48px 0px 0px #292929;
  422. -moz-box-shadow: inset 48px 0px 0px #292929;
  423. box-shadow: inset 48px 0px 0px #292929;
  424. }
  425. ul.messenger-theme-flat .messenger-spinner {
  426. display: block;
  427. position: absolute;
  428. left: 7px;
  429. top: 50%;
  430. margin-top: -18px;
  431. z-index: 999;
  432. height: 32px;
  433. width: 32px;
  434. z-index: 10;
  435. }