message.css 14 KB

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