message.css 13 KB

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