2
0

converse.css 94 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599
  1. /*!
  2. * Converse.js (Web-based XMPP instant messaging client)
  3. * http://conversejs.org
  4. *
  5. * Copyright (c) 2012-2016, JC Brand <jc@opkode.com>
  6. * Licensed under the Mozilla Public License
  7. */
  8. /*
  9. Color scheme helpers:
  10. https://coolors.co/app/264653-2a9d8f-e9c46a-f4a261-e76f51
  11. http://paletton.com/#uid=53f0u0knsvIdILAj5Cftgu3uBmZ
  12. */
  13. @font-face {
  14. font-family: 'Converse-js';
  15. src: url("../fonticons/fonts/icomoon.eot?wvi0ht");
  16. src: url("../fonticons/fonts/icomoon.eot?wvi0ht#iefix") format("embedded-opentype"), url("../fonticons/fonts/icomoon.ttf?wvi0ht") format("truetype"), url("../fonticons/fonts/icomoon.woff?wvi0ht") format("woff"), url("../fonticons/fonts/icomoon.svg?wvi0ht#icomoon") format("svg");
  17. font-weight: normal;
  18. font-style: normal; }
  19. .icon-conversejs {
  20. font-family: 'Converse-js';
  21. speak: none;
  22. font-style: normal;
  23. font-weight: normal;
  24. font-variant: normal;
  25. text-transform: none;
  26. line-height: 1;
  27. /* Better Font Rendering =========== */
  28. -webkit-font-smoothing: antialiased;
  29. -moz-osx-font-smoothing: grayscale; }
  30. .icon-conversejs:before {
  31. content: "\e600"; }
  32. #converse-embedded-chat .icon-address-book:before,
  33. #conversejs .icon-address-book:before {
  34. content: "\270f"; }
  35. #converse-embedded-chat .icon-angry:before,
  36. #conversejs .icon-angry:before {
  37. content: "\e03f"; }
  38. #converse-embedded-chat .icon-attachment:before,
  39. #conversejs .icon-attachment:before {
  40. content: "\e032"; }
  41. #converse-embedded-chat .icon-away:before,
  42. #conversejs .icon-away:before {
  43. content: "\25fb"; }
  44. #converse-embedded-chat .icon-blocked:before,
  45. #conversejs .icon-blocked:before {
  46. content: "\2718"; }
  47. #converse-embedded-chat .icon-bold:before,
  48. #conversejs .icon-bold:before {
  49. content: "\e04d"; }
  50. #converse-embedded-chat .icon-bubbles-2:before,
  51. #conversejs .icon-bubbles-2:before {
  52. content: "\e016"; }
  53. #converse-embedded-chat .icon-bubbles-3:before,
  54. #conversejs .icon-bubbles-3:before {
  55. content: "\e017"; }
  56. #converse-embedded-chat .icon-bubbles:before,
  57. #conversejs .icon-bubbles:before {
  58. content: "\e015"; }
  59. #converse-embedded-chat .icon-camera-2:before,
  60. #conversejs .icon-camera-2:before {
  61. content: "\2616"; }
  62. #converse-embedded-chat .icon-camera:before,
  63. #conversejs .icon-camera:before {
  64. content: "\e003"; }
  65. #converse-embedded-chat .icon-cancel-circle:before,
  66. #conversejs .icon-cancel-circle:before {
  67. content: "\e058"; }
  68. #converse-embedded-chat .icon-chat:before,
  69. #conversejs .icon-chat:before {
  70. content: "\25fc"; }
  71. #converse-embedded-chat .icon-checkbox-checked:before,
  72. #conversejs .icon-checkbox-checked:before {
  73. content: "\2611"; }
  74. #converse-embedded-chat .icon-checkbox-partial:before,
  75. #conversejs .icon-checkbox-partial:before {
  76. content: "\2b28"; }
  77. #converse-embedded-chat .icon-checkbox-unchecked:before,
  78. #conversejs .icon-checkbox-unchecked:before {
  79. content: "\2b27"; }
  80. #converse-embedded-chat .icon-checkmark:before,
  81. #conversejs .icon-checkmark:before {
  82. content: "\2713"; }
  83. #converse-embedded-chat .icon-close:before,
  84. #conversejs .icon-close:before {
  85. content: "\2715"; }
  86. #converse-embedded-chat .icon-closed:before,
  87. #conversejs .icon-closed:before {
  88. content: "\25ba"; }
  89. #converse-embedded-chat .icon-cog:before,
  90. #conversejs .icon-cog:before {
  91. content: "\e02f"; }
  92. #converse-embedded-chat .icon-cogs:before,
  93. #conversejs .icon-cogs:before {
  94. content: "\e022"; }
  95. #converse-embedded-chat .icon-confused:before,
  96. #conversejs .icon-confused:before {
  97. content: "\2368"; }
  98. #converse-embedded-chat .icon-cool:before,
  99. #conversejs .icon-cool:before {
  100. content: "\e040"; }
  101. #converse-embedded-chat .icon-database:before,
  102. #conversejs .icon-database:before {
  103. content: "\f1c0"; }
  104. #converse-embedded-chat .icon-dnd:before,
  105. #conversejs .icon-dnd:before {
  106. content: "\e004"; }
  107. #converse-embedded-chat .icon-envelop:before,
  108. #conversejs .icon-envelop:before {
  109. content: "\2709"; }
  110. #converse-embedded-chat .icon-evil:before,
  111. #conversejs .icon-evil:before {
  112. content: "\261f"; }
  113. #converse-embedded-chat .icon-eye-blocked:before,
  114. #conversejs .icon-eye-blocked:before {
  115. content: "\e031"; }
  116. #converse-embedded-chat .icon-eye:before,
  117. #conversejs .icon-eye:before {
  118. content: "\e030"; }
  119. #converse-embedded-chat .icon-globe:before,
  120. #conversejs .icon-globe:before {
  121. content: "\f0ac"; }
  122. #converse-embedded-chat .icon-grin:before,
  123. #conversejs .icon-grin:before {
  124. content: "\e041"; }
  125. #converse-embedded-chat .icon-happy:before,
  126. #conversejs .icon-happy:before {
  127. content: "\263b"; }
  128. #converse-embedded-chat .icon-headphones:before,
  129. #conversejs .icon-headphones:before {
  130. content: "\266c"; }
  131. #converse-embedded-chat .icon-heart:before,
  132. #conversejs .icon-heart:before {
  133. content: "\2764"; }
  134. #converse-embedded-chat .icon-hide-users:before,
  135. #conversejs .icon-hide-users:before {
  136. content: "\e01c"; }
  137. #converse-embedded-chat .icon-home:before,
  138. #conversejs .icon-home:before {
  139. content: "\e000"; }
  140. #converse-embedded-chat .icon-idcard-dark:before,
  141. #conversejs .icon-idcard-dark:before {
  142. content: "\f2c2"; }
  143. #converse-embedded-chat .icon-idcard:before,
  144. #conversejs .icon-idcard:before {
  145. content: "\f2c3"; }
  146. #converse-embedded-chat .icon-image:before,
  147. #conversejs .icon-image:before {
  148. content: "\2b14"; }
  149. #converse-embedded-chat .icon-info-2:before,
  150. #conversejs .icon-info-2:before {
  151. content: "i"; }
  152. #converse-embedded-chat .icon-info:before,
  153. #conversejs .icon-info:before {
  154. content: "\2360"; }
  155. #converse-embedded-chat .icon-italic:before,
  156. #conversejs .icon-italic:before {
  157. content: "\e04f"; }
  158. #converse-embedded-chat .icon-key-2:before,
  159. #conversejs .icon-key-2:before {
  160. content: "\e029"; }
  161. #converse-embedded-chat .icon-key:before,
  162. #conversejs .icon-key:before {
  163. content: "\e028"; }
  164. #converse-embedded-chat .icon-legal:before,
  165. #conversejs .icon-legal:before {
  166. content: "\f0e3"; }
  167. #converse-embedded-chat .icon-lock-2:before,
  168. #conversejs .icon-lock-2:before {
  169. content: "\e027"; }
  170. #converse-embedded-chat .icon-lock:before,
  171. #conversejs .icon-lock:before {
  172. content: "\e026"; }
  173. #converse-embedded-chat .icon-logout:before,
  174. #conversejs .icon-logout:before {
  175. content: "\e601"; }
  176. #converse-embedded-chat .icon-minus:before,
  177. #conversejs .icon-minus:before {
  178. content: "\e05a"; }
  179. #converse-embedded-chat .icon-music:before,
  180. #conversejs .icon-music:before {
  181. content: "\266b"; }
  182. #converse-embedded-chat .icon-new-tab:before,
  183. #conversejs .icon-new-tab:before {
  184. content: "\e053"; }
  185. #converse-embedded-chat .icon-newspaper:before,
  186. #conversejs .icon-newspaper:before {
  187. content: "\e001"; }
  188. #converse-embedded-chat .icon-notebook:before,
  189. #conversejs .icon-notebook:before {
  190. content: "\2710"; }
  191. #converse-embedded-chat .icon-notification:before,
  192. #conversejs .icon-notification:before {
  193. content: "\e01f"; }
  194. #converse-embedded-chat .icon-offline:before,
  195. #conversejs .icon-offline:before {
  196. content: "\e002"; }
  197. #converse-embedded-chat .icon-online:before,
  198. #conversejs .icon-online:before {
  199. content: "\25fc"; }
  200. #converse-embedded-chat .icon-opened:before,
  201. #conversejs .icon-opened:before {
  202. content: "\25bc"; }
  203. #converse-embedded-chat .icon-pencil:before,
  204. #conversejs .icon-pencil:before {
  205. content: "\270e"; }
  206. #converse-embedded-chat .icon-phone-hang-up:before,
  207. #conversejs .icon-phone-hang-up:before {
  208. content: "\260e"; }
  209. #converse-embedded-chat .icon-phone:before,
  210. #conversejs .icon-phone:before {
  211. content: "\260f"; }
  212. #converse-embedded-chat .icon-play:before,
  213. #conversejs .icon-play:before {
  214. content: "\25d9"; }
  215. #converse-embedded-chat .icon-plus:before,
  216. #conversejs .icon-plus:before {
  217. content: "\271a"; }
  218. #converse-embedded-chat .icon-pushpin:before,
  219. #conversejs .icon-pushpin:before {
  220. content: "\e012"; }
  221. #converse-embedded-chat .icon-quotes-left:before,
  222. #conversejs .icon-quotes-left:before {
  223. content: "\e01d"; }
  224. #converse-embedded-chat .icon-radio-checked:before,
  225. #conversejs .icon-radio-checked:before {
  226. content: "\2b26"; }
  227. #converse-embedded-chat .icon-radio-unchecked:before,
  228. #conversejs .icon-radio-unchecked:before {
  229. content: "\2b25"; }
  230. #converse-embedded-chat .icon-remove:before,
  231. #conversejs .icon-remove:before {
  232. content: "\e02d"; }
  233. #converse-embedded-chat .icon-room-info:before,
  234. #conversejs .icon-room-info:before {
  235. content: "\e059"; }
  236. #converse-embedded-chat .icon-sad:before,
  237. #conversejs .icon-sad:before {
  238. content: "\2639"; }
  239. #converse-embedded-chat .icon-save:before,
  240. #conversejs .icon-save:before {
  241. content: "\f0c7"; }
  242. #converse-embedded-chat .icon-search:before,
  243. #conversejs .icon-search:before {
  244. content: "\e021"; }
  245. #converse-embedded-chat .icon-shocked:before,
  246. #conversejs .icon-shocked:before {
  247. content: "\2364"; }
  248. #converse-embedded-chat .icon-show-users:before,
  249. #conversejs .icon-show-users:before {
  250. content: "\e01e"; }
  251. #converse-embedded-chat .icon-smiley:before,
  252. #conversejs .icon-smiley:before {
  253. content: "\263a"; }
  254. #converse-embedded-chat .icon-snowflake:before,
  255. #conversejs .icon-snowflake:before {
  256. content: "\f2dc"; }
  257. #converse-embedded-chat .icon-spell-check:before,
  258. #conversejs .icon-spell-check:before {
  259. content: "\e045"; }
  260. #converse-embedded-chat .icon-spinner:before,
  261. #conversejs .icon-spinner:before {
  262. content: "\231b"; }
  263. #converse-embedded-chat .icon-strikethrough:before,
  264. #conversejs .icon-strikethrough:before {
  265. content: "\e050"; }
  266. #converse-embedded-chat .icon-thumbs-up:before,
  267. #conversejs .icon-thumbs-up:before {
  268. content: "\261d"; }
  269. #converse-embedded-chat .icon-tongue:before,
  270. #conversejs .icon-tongue:before {
  271. content: "\e038"; }
  272. #converse-embedded-chat .icon-unavailable:before,
  273. #converse-embedded-chat .icon-underline:before,
  274. #conversejs .icon-unavailable:before,
  275. #conversejs .icon-underline:before {
  276. content: "\e04e"; }
  277. #converse-embedded-chat .icon-unlocked:before,
  278. #conversejs .icon-unlocked:before {
  279. content: "\e025"; }
  280. #converse-embedded-chat .icon-user:before,
  281. #conversejs .icon-user:before {
  282. content: "\e01a"; }
  283. #converse-embedded-chat .icon-users:before,
  284. #conversejs .icon-users:before {
  285. content: "\e01b"; }
  286. #converse-embedded-chat .icon-warning:before,
  287. #conversejs .icon-warning:before {
  288. content: "\26a0"; }
  289. #converse-embedded-chat .icon-wink:before,
  290. #conversejs .icon-wink:before {
  291. content: "\e03a"; }
  292. #converse-embedded-chat .icon-wondering:before,
  293. #conversejs .icon-wondering:before {
  294. content: "\2369"; }
  295. #converse-embedded-chat .icon-wrench:before,
  296. #conversejs .icon-wrench:before {
  297. content: "\e024"; }
  298. #converse-embedded-chat .icon-xa:before,
  299. #conversejs .icon-xa:before {
  300. content: "\e602"; }
  301. #converse-embedded-chat .icon-youtube:before,
  302. #conversejs .icon-youtube:before {
  303. content: "\e055"; }
  304. #converse-embedded-chat .icon-zoom-in:before,
  305. #conversejs .icon-zoom-in:before {
  306. content: "\e02b"; }
  307. #converse-embedded-chat .icon-zoom-out:before,
  308. #conversejs .icon-zoom-out:before {
  309. content: "\e02a"; }
  310. #converse-embedded-chat [data-icon]:before,
  311. #conversejs [data-icon]:before {
  312. content: attr(data-icon);
  313. font-family: 'Converse-js';
  314. font-variant: normal;
  315. font-weight: normal;
  316. line-height: 1;
  317. speak: none;
  318. text-transform: none;
  319. /* Better Font Rendering =========== */
  320. -webkit-font-smoothing: antialiased;
  321. -moz-osx-font-smoothing: grayscale; }
  322. #converse-embedded-chat [class^="icon-"]:before, #converse-embedded-chat [class*=" icon-"]:before,
  323. #conversejs [class^="icon-"]:before,
  324. #conversejs [class*=" icon-"]:before {
  325. background-position: 14px 14px;
  326. background-image: none;
  327. font-family: 'Converse-js';
  328. font-style: normal;
  329. font-variant: normal;
  330. font-weight: normal;
  331. width: auto;
  332. height: auto;
  333. line-height: 1;
  334. speak: none;
  335. text-transform: none;
  336. /* Better Font Rendering =========== */
  337. -webkit-font-smoothing: antialiased;
  338. -moz-osx-font-smoothing: grayscale; }
  339. #conversejs {
  340. /*!
  341. Pure v0.6.1-pre
  342. Copyright 2014 Yahoo! Inc. All rights reserved.
  343. Licensed under the BSD License.
  344. https://github.com/yahoo/pure/blob/master/LICENSE.md
  345. */
  346. /*!
  347. normalize.css v^3.0 | MIT License | git.io/normalize
  348. Copyright (c) Nicolas Gallagher and Jonathan Neal
  349. */
  350. /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
  351. /**
  352. * 1. Set default font family to sans-serif.
  353. * 2. Prevent iOS and IE text size adjust after device orientation change,
  354. * without disabling user zoom.
  355. */
  356. /**
  357. * Remove default margin.
  358. */
  359. /* HTML5 display definitions
  360. ========================================================================== */
  361. /**
  362. * Correct `block` display not defined for any HTML5 element in IE 8/9.
  363. * Correct `block` display not defined for `details` or `summary` in IE 10/11
  364. * and Firefox.
  365. * Correct `block` display not defined for `main` in IE 11.
  366. */
  367. /**
  368. * 1. Correct `inline-block` display not defined in IE 8/9.
  369. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
  370. */
  371. /**
  372. * Prevent modern browsers from displaying `audio` without controls.
  373. * Remove excess height in iOS 5 devices.
  374. */
  375. /**
  376. * Address `[hidden]` styling not present in IE 8/9/10.
  377. * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
  378. */
  379. /* Links
  380. ========================================================================== */
  381. /**
  382. * Remove the gray background color from active links in IE 10.
  383. */
  384. /**
  385. * Improve readability of focused elements when they are also in an
  386. * active/hover state.
  387. */
  388. /* Text-level semantics
  389. ========================================================================== */
  390. /**
  391. * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
  392. */
  393. /**
  394. * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
  395. */
  396. /**
  397. * Address styling not present in Safari and Chrome.
  398. */
  399. /**
  400. * Address variable `h1` font-size and margin within `section` and `article`
  401. * contexts in Firefox 4+, Safari, and Chrome.
  402. */
  403. /**
  404. * Address styling not present in IE 8/9.
  405. */
  406. /**
  407. * Address inconsistent and variable font size in all browsers.
  408. */
  409. /**
  410. * Prevent `sub` and `sup` affecting `line-height` in all browsers.
  411. */
  412. /* Embedded content
  413. ========================================================================== */
  414. /**
  415. * Remove border when inside `a` element in IE 8/9/10.
  416. */
  417. /**
  418. * Correct overflow not hidden in IE 9/10/11.
  419. */
  420. /* Grouping content
  421. ========================================================================== */
  422. /**
  423. * Address margin not present in IE 8/9 and Safari.
  424. */
  425. /**
  426. * Address differences between Firefox and other browsers.
  427. */
  428. /**
  429. * Contain overflow in all browsers.
  430. */
  431. /**
  432. * Address odd `em`-unit font size rendering in all browsers.
  433. */
  434. /* Forms
  435. ========================================================================== */
  436. /**
  437. * Known limitation: by default, Chrome and Safari on OS X allow very limited
  438. * styling of `select`, unless a `border` property is set.
  439. */
  440. /**
  441. * 1. Correct color not being inherited.
  442. * Known issue: affects color of disabled elements.
  443. * 2. Correct font properties not being inherited.
  444. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
  445. */
  446. /**
  447. * Address `overflow` set to `hidden` in IE 8/9/10/11.
  448. */
  449. /**
  450. * Address inconsistent `text-transform` inheritance for `button` and `select`.
  451. * All other form control elements do not inherit `text-transform` values.
  452. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
  453. * Correct `select` style inheritance in Firefox.
  454. */
  455. /**
  456. * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
  457. * and `video` controls.
  458. * 2. Correct inability to style clickable `input` types in iOS.
  459. * 3. Improve usability and consistency of cursor style between image-type
  460. * `input` and others.
  461. */
  462. /**
  463. * Re-set default cursor for disabled elements.
  464. */
  465. /**
  466. * Remove inner padding and border in Firefox 4+.
  467. */
  468. /**
  469. * Address Firefox 4+ setting `line-height` on `input` using `!important` in
  470. * the UA stylesheet.
  471. */
  472. /**
  473. * It's recommended that you don't attempt to style these elements.
  474. * Firefox's implementation doesn't respect box-sizing, padding, or width.
  475. *
  476. * 1. Address box sizing set to `content-box` in IE 8/9/10.
  477. * 2. Remove excess padding in IE 8/9/10.
  478. */
  479. /**
  480. * Fix the cursor style for Chrome's increment/decrement buttons. For certain
  481. * `font-size` values of the `input`, it causes the cursor style of the
  482. * decrement button to change from `default` to `text`.
  483. */
  484. /**
  485. * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
  486. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
  487. */
  488. /**
  489. * Remove inner padding and search cancel button in Safari and Chrome on OS X.
  490. * Safari (but not Chrome) clips the cancel button when the search input has
  491. * padding (and `textfield` appearance).
  492. */
  493. /**
  494. * Define consistent border, margin, and padding.
  495. */
  496. /**
  497. * 1. Correct `color` not being inherited in IE 8/9/10/11.
  498. * 2. Remove padding so people aren't caught out if they zero out fieldsets.
  499. */
  500. /**
  501. * Remove default vertical scrollbar in IE 8/9/10/11.
  502. */
  503. /**
  504. * Don't inherit the `font-weight` (applied by a rule above).
  505. * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
  506. */
  507. /* Tables
  508. ========================================================================== */
  509. /**
  510. * Remove most spacing between table cells.
  511. */
  512. /*csslint important:false*/
  513. /* ==========================================================================
  514. Pure Base Extras
  515. ========================================================================== */
  516. /**
  517. * Extra rules that Pure adds on top of Normalize.css
  518. */
  519. /**
  520. * Always hide an element when it has the `hidden` HTML attribute.
  521. */
  522. /**
  523. * Add this class to an image to make it fit within it's fluid parent wrapper while maintaining
  524. * aspect ratio.
  525. */
  526. /*!
  527. Pure v0.6.1-pre
  528. Copyright 2014 Yahoo! Inc. All rights reserved.
  529. Licensed under the BSD License.
  530. https://github.com/yahoo/pure/blob/master/LICENSE.md
  531. */
  532. /*csslint box-model:false*/
  533. /*
  534. Box-model set to false because we're setting a height on select elements, which
  535. also have border and padding. This is done because some browsers don't render
  536. the padding. We explicitly set the box-model for select elements to border-box,
  537. so we can ignore the csslint warning.
  538. */
  539. /*
  540. Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
  541. since IE8 won't execute CSS that contains a CSS3 selector.
  542. */
  543. /* Chrome (as of v.32/34 on OS X) needs additional room for color to display. */
  544. /* May be able to remove this tweak as color inputs become more standardized across browsers. */
  545. /*
  546. Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
  547. since IE8 won't execute CSS that contains a CSS3 selector.
  548. */
  549. /*
  550. Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
  551. since IE8 won't execute CSS that contains a CSS3 selector.
  552. */
  553. /*
  554. Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
  555. since IE8 won't execute CSS that contains a CSS3 selector.
  556. */
  557. /* Aligned Forms */
  558. /* Rounded Inputs */
  559. /* Grouped Inputs */
  560. /* Inline help for forms */
  561. /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */
  562. /* Block help for forms */
  563. /*!
  564. Pure v0.6.1-pre
  565. Copyright 2014 Yahoo! Inc. All rights reserved.
  566. Licensed under the BSD License.
  567. https://github.com/yahoo/pure/blob/master/LICENSE.md
  568. */
  569. /* Firefox: Get rid of the inner focus border */
  570. /*csslint outline-none:false*/
  571. /* Firefox: Get rid of the inner focus border */
  572. -webkit-box-sizing: border-box;
  573. -moz-box-sizing: border-box;
  574. box-sizing: border-box; }
  575. #conversejs html {
  576. font-family: sans-serif;
  577. /* 1 */
  578. -ms-text-size-adjust: 100%;
  579. /* 2 */
  580. -webkit-text-size-adjust: 100%;
  581. /* 2 */ }
  582. #conversejs body {
  583. margin: 0; }
  584. #conversejs article,
  585. #conversejs aside,
  586. #conversejs details,
  587. #conversejs figcaption,
  588. #conversejs figure,
  589. #conversejs footer,
  590. #conversejs header,
  591. #conversejs hgroup,
  592. #conversejs main,
  593. #conversejs menu,
  594. #conversejs nav,
  595. #conversejs section,
  596. #conversejs summary {
  597. display: block; }
  598. #conversejs audio,
  599. #conversejs canvas,
  600. #conversejs progress,
  601. #conversejs video {
  602. display: inline-block;
  603. /* 1 */
  604. vertical-align: baseline;
  605. /* 2 */ }
  606. #conversejs audio:not([controls]) {
  607. display: none;
  608. height: 0; }
  609. #conversejs [hidden],
  610. #conversejs template {
  611. display: none; }
  612. #conversejs a {
  613. background-color: transparent; }
  614. #conversejs a:active,
  615. #conversejs a:hover {
  616. outline: 0; }
  617. #conversejs abbr[title] {
  618. border-bottom: 1px dotted; }
  619. #conversejs b,
  620. #conversejs strong {
  621. font-weight: bold; }
  622. #conversejs dfn {
  623. font-style: italic; }
  624. #conversejs h1 {
  625. font-size: 2em;
  626. margin: 0.67em 0; }
  627. #conversejs mark {
  628. background: #ff0;
  629. color: #000; }
  630. #conversejs small {
  631. font-size: 80%; }
  632. #conversejs sub,
  633. #conversejs sup {
  634. font-size: 75%;
  635. line-height: 0;
  636. position: relative;
  637. vertical-align: baseline; }
  638. #conversejs sup {
  639. top: -0.5em; }
  640. #conversejs sub {
  641. bottom: -0.25em; }
  642. #conversejs img {
  643. border: 0; }
  644. #conversejs svg:not(:root) {
  645. overflow: hidden; }
  646. #conversejs figure {
  647. margin: 1em 40px; }
  648. #conversejs hr {
  649. box-sizing: content-box;
  650. height: 0; }
  651. #conversejs pre {
  652. overflow: auto; }
  653. #conversejs code,
  654. #conversejs kbd,
  655. #conversejs pre,
  656. #conversejs samp {
  657. font-family: monospace, monospace;
  658. font-size: 1em; }
  659. #conversejs button,
  660. #conversejs input,
  661. #conversejs optgroup,
  662. #conversejs select,
  663. #conversejs textarea {
  664. color: inherit;
  665. /* 1 */
  666. font: inherit;
  667. /* 2 */
  668. margin: 0;
  669. /* 3 */ }
  670. #conversejs button {
  671. overflow: visible; }
  672. #conversejs button,
  673. #conversejs select {
  674. text-transform: none; }
  675. #conversejs button,
  676. #conversejs html input[type="button"],
  677. #conversejs input[type="reset"],
  678. #conversejs input[type="submit"] {
  679. -webkit-appearance: button;
  680. /* 2 */
  681. cursor: pointer;
  682. /* 3 */ }
  683. #conversejs button[disabled],
  684. #conversejs html input[disabled] {
  685. cursor: default; }
  686. #conversejs button::-moz-focus-inner,
  687. #conversejs input::-moz-focus-inner {
  688. border: 0;
  689. padding: 0; }
  690. #conversejs input {
  691. line-height: normal; }
  692. #conversejs input[type="checkbox"],
  693. #conversejs input[type="radio"] {
  694. box-sizing: border-box;
  695. /* 1 */
  696. padding: 0;
  697. /* 2 */ }
  698. #conversejs input[type="number"]::-webkit-inner-spin-button,
  699. #conversejs input[type="number"]::-webkit-outer-spin-button {
  700. height: auto; }
  701. #conversejs input[type="search"] {
  702. -webkit-appearance: textfield;
  703. /* 1 */
  704. box-sizing: content-box;
  705. /* 2 */ }
  706. #conversejs input[type="search"]::-webkit-search-cancel-button,
  707. #conversejs input[type="search"]::-webkit-search-decoration {
  708. -webkit-appearance: none; }
  709. #conversejs fieldset {
  710. border: 1px solid #c0c0c0;
  711. margin: 0 2px;
  712. padding: 0.35em 0.625em 0.75em; }
  713. #conversejs legend {
  714. border: 0;
  715. /* 1 */
  716. padding: 0;
  717. /* 2 */ }
  718. #conversejs textarea {
  719. overflow: auto; }
  720. #conversejs optgroup {
  721. font-weight: bold; }
  722. #conversejs table {
  723. border-collapse: collapse;
  724. border-spacing: 0; }
  725. #conversejs td,
  726. #conversejs th {
  727. padding: 0; }
  728. #conversejs .hidden,
  729. #conversejs [hidden] {
  730. display: none !important; }
  731. #conversejs .pure-img {
  732. max-width: 100%;
  733. height: auto;
  734. display: block; }
  735. #conversejs .pure-form input[type="text"],
  736. #conversejs .pure-form input[type="password"],
  737. #conversejs .pure-form input[type="email"],
  738. #conversejs .pure-form input[type="url"],
  739. #conversejs .pure-form input[type="date"],
  740. #conversejs .pure-form input[type="month"],
  741. #conversejs .pure-form input[type="time"],
  742. #conversejs .pure-form input[type="datetime"],
  743. #conversejs .pure-form input[type="datetime-local"],
  744. #conversejs .pure-form input[type="week"],
  745. #conversejs .pure-form input[type="number"],
  746. #conversejs .pure-form input[type="search"],
  747. #conversejs .pure-form input[type="tel"],
  748. #conversejs .pure-form input[type="color"],
  749. #conversejs .pure-form select,
  750. #conversejs .pure-form textarea {
  751. padding: 0.5em 0.6em;
  752. display: inline-block;
  753. border: 1px solid #ccc;
  754. box-shadow: inset 0 1px 3px #ddd;
  755. border-radius: 4px;
  756. vertical-align: middle;
  757. -webkit-box-sizing: border-box;
  758. -moz-box-sizing: border-box;
  759. box-sizing: border-box; }
  760. #conversejs .pure-form input:not([type]) {
  761. padding: 0.5em 0.6em;
  762. display: inline-block;
  763. border: 1px solid #ccc;
  764. box-shadow: inset 0 1px 3px #ddd;
  765. border-radius: 4px;
  766. -webkit-box-sizing: border-box;
  767. -moz-box-sizing: border-box;
  768. box-sizing: border-box; }
  769. #conversejs .pure-form input[type="color"] {
  770. padding: 0.2em 0.5em; }
  771. #conversejs .pure-form input[type="text"]:focus,
  772. #conversejs .pure-form input[type="password"]:focus,
  773. #conversejs .pure-form input[type="email"]:focus,
  774. #conversejs .pure-form input[type="url"]:focus,
  775. #conversejs .pure-form input[type="date"]:focus,
  776. #conversejs .pure-form input[type="month"]:focus,
  777. #conversejs .pure-form input[type="time"]:focus,
  778. #conversejs .pure-form input[type="datetime"]:focus,
  779. #conversejs .pure-form input[type="datetime-local"]:focus,
  780. #conversejs .pure-form input[type="week"]:focus,
  781. #conversejs .pure-form input[type="number"]:focus,
  782. #conversejs .pure-form input[type="search"]:focus,
  783. #conversejs .pure-form input[type="tel"]:focus,
  784. #conversejs .pure-form input[type="color"]:focus,
  785. #conversejs .pure-form select:focus,
  786. #conversejs .pure-form textarea:focus {
  787. outline: 0;
  788. border-color: #1A9707; }
  789. #conversejs .pure-form input:not([type]):focus {
  790. outline: 0;
  791. border-color: #1A9707; }
  792. #conversejs .pure-form input[type="file"]:focus,
  793. #conversejs .pure-form input[type="radio"]:focus,
  794. #conversejs .pure-form input[type="checkbox"]:focus {
  795. outline: thin solid #1A9707;
  796. outline: 1px auto #1A9707; }
  797. #conversejs .pure-form .pure-checkbox,
  798. #conversejs .pure-form .pure-radio {
  799. margin: 0.5em 0;
  800. display: block; }
  801. #conversejs .pure-form input[type="text"][disabled],
  802. #conversejs .pure-form input[type="password"][disabled],
  803. #conversejs .pure-form input[type="email"][disabled],
  804. #conversejs .pure-form input[type="url"][disabled],
  805. #conversejs .pure-form input[type="date"][disabled],
  806. #conversejs .pure-form input[type="month"][disabled],
  807. #conversejs .pure-form input[type="time"][disabled],
  808. #conversejs .pure-form input[type="datetime"][disabled],
  809. #conversejs .pure-form input[type="datetime-local"][disabled],
  810. #conversejs .pure-form input[type="week"][disabled],
  811. #conversejs .pure-form input[type="number"][disabled],
  812. #conversejs .pure-form input[type="search"][disabled],
  813. #conversejs .pure-form input[type="tel"][disabled],
  814. #conversejs .pure-form input[type="color"][disabled],
  815. #conversejs .pure-form select[disabled],
  816. #conversejs .pure-form textarea[disabled] {
  817. cursor: not-allowed;
  818. background-color: #eaeded;
  819. color: #cad2d3; }
  820. #conversejs .pure-form input:not([type])[disabled] {
  821. cursor: not-allowed;
  822. background-color: #eaeded;
  823. color: #cad2d3; }
  824. #conversejs .pure-form input[readonly],
  825. #conversejs .pure-form select[readonly],
  826. #conversejs .pure-form textarea[readonly] {
  827. background-color: #eee;
  828. /* menu hover bg color */
  829. color: #777;
  830. /* menu text color */
  831. border-color: #ccc; }
  832. #conversejs .pure-form input:focus:invalid,
  833. #conversejs .pure-form textarea:focus:invalid,
  834. #conversejs .pure-form select:focus:invalid {
  835. color: #b94a48;
  836. border-color: #e9322d; }
  837. #conversejs .pure-form input[type="file"]:focus:invalid:focus,
  838. #conversejs .pure-form input[type="radio"]:focus:invalid:focus,
  839. #conversejs .pure-form input[type="checkbox"]:focus:invalid:focus {
  840. outline-color: #e9322d; }
  841. #conversejs .pure-form select {
  842. /* Normalizes the height; padding is not sufficient. */
  843. height: 2.25em;
  844. border: 1px solid #ccc;
  845. background-color: white; }
  846. #conversejs .pure-form select[multiple] {
  847. height: auto; }
  848. #conversejs .pure-form label {
  849. margin: 0.5em 0 0.2em; }
  850. #conversejs .pure-form fieldset {
  851. margin: 0;
  852. padding: 0.35em 0 0.35em;
  853. border: 0; }
  854. #conversejs .pure-form legend {
  855. display: block;
  856. width: 100%;
  857. padding: 0.3em 0;
  858. margin-bottom: 0.3em;
  859. color: #333;
  860. border-bottom: 1px solid #e5e5e5; }
  861. #conversejs .pure-form-stacked input[type="text"],
  862. #conversejs .pure-form-stacked input[type="password"],
  863. #conversejs .pure-form-stacked input[type="email"],
  864. #conversejs .pure-form-stacked input[type="url"],
  865. #conversejs .pure-form-stacked input[type="date"],
  866. #conversejs .pure-form-stacked input[type="month"],
  867. #conversejs .pure-form-stacked input[type="time"],
  868. #conversejs .pure-form-stacked input[type="datetime"],
  869. #conversejs .pure-form-stacked input[type="datetime-local"],
  870. #conversejs .pure-form-stacked input[type="week"],
  871. #conversejs .pure-form-stacked input[type="number"],
  872. #conversejs .pure-form-stacked input[type="search"],
  873. #conversejs .pure-form-stacked input[type="tel"],
  874. #conversejs .pure-form-stacked input[type="color"],
  875. #conversejs .pure-form-stacked input[type="file"],
  876. #conversejs .pure-form-stacked select,
  877. #conversejs .pure-form-stacked label,
  878. #conversejs .pure-form-stacked textarea {
  879. display: block;
  880. margin: 0.25em 0; }
  881. #conversejs .pure-form-stacked input:not([type]) {
  882. display: block;
  883. margin: 0.25em 0; }
  884. #conversejs .pure-form-aligned input,
  885. #conversejs .pure-form-aligned textarea,
  886. #conversejs .pure-form-aligned select,
  887. #conversejs .pure-form-aligned .pure-help-inline,
  888. #conversejs .pure-form-message-inline {
  889. display: inline-block;
  890. *display: inline;
  891. *zoom: 1;
  892. vertical-align: middle; }
  893. #conversejs .pure-form-aligned textarea {
  894. vertical-align: top; }
  895. #conversejs .pure-form-aligned .pure-control-group {
  896. margin-bottom: 0.5em; }
  897. #conversejs .pure-form-aligned .pure-control-group label {
  898. text-align: right;
  899. display: inline-block;
  900. vertical-align: middle;
  901. width: 10em;
  902. margin: 0 1em 0 0; }
  903. #conversejs .pure-form-aligned .pure-controls {
  904. margin: 1.5em 0 0 11em; }
  905. #conversejs .pure-form input.pure-input-rounded,
  906. #conversejs .pure-form .pure-input-rounded {
  907. border-radius: 2em;
  908. padding: 0.5em 1em; }
  909. #conversejs .pure-form .pure-group fieldset {
  910. margin-bottom: 10px; }
  911. #conversejs .pure-form .pure-group input,
  912. #conversejs .pure-form .pure-group textarea {
  913. display: block;
  914. padding: 10px;
  915. margin: 0 0 -1px;
  916. border-radius: 0;
  917. position: relative;
  918. top: -1px; }
  919. #conversejs .pure-form .pure-group input:focus,
  920. #conversejs .pure-form .pure-group textarea:focus {
  921. z-index: 3; }
  922. #conversejs .pure-form .pure-group input:first-child,
  923. #conversejs .pure-form .pure-group textarea:first-child {
  924. top: 1px;
  925. border-radius: 4px 4px 0 0;
  926. margin: 0; }
  927. #conversejs .pure-form .pure-group input:first-child:last-child,
  928. #conversejs .pure-form .pure-group textarea:first-child:last-child {
  929. top: 1px;
  930. border-radius: 4px;
  931. margin: 0; }
  932. #conversejs .pure-form .pure-group input:last-child,
  933. #conversejs .pure-form .pure-group textarea:last-child {
  934. top: -2px;
  935. border-radius: 0 0 4px 4px;
  936. margin: 0; }
  937. #conversejs .pure-form .pure-group button {
  938. margin: 0.35em 0; }
  939. #conversejs .pure-form .pure-input-1 {
  940. width: 100%; }
  941. #conversejs .pure-form .pure-input-3-4 {
  942. width: 75%; }
  943. #conversejs .pure-form .pure-input-2-3 {
  944. width: 66%; }
  945. #conversejs .pure-form .pure-input-1-2 {
  946. width: 50%; }
  947. #conversejs .pure-form .pure-input-1-3 {
  948. width: 33%; }
  949. #conversejs .pure-form .pure-input-1-4 {
  950. width: 25%; }
  951. #conversejs .pure-form .pure-help-inline,
  952. #conversejs .pure-form-message-inline {
  953. display: inline-block;
  954. padding-left: 0.3em;
  955. color: #666;
  956. vertical-align: middle;
  957. font-size: 0.875em; }
  958. #conversejs .pure-form-message {
  959. display: block;
  960. color: #666;
  961. font-size: 0.875em; }
  962. @media only screen and (max-width: 480px) {
  963. #conversejs {
  964. /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */ }
  965. #conversejs .pure-form button[type="submit"] {
  966. margin: 0.7em 0 0; }
  967. #conversejs .pure-form input:not([type]),
  968. #conversejs .pure-form input[type="text"],
  969. #conversejs .pure-form input[type="password"],
  970. #conversejs .pure-form input[type="email"],
  971. #conversejs .pure-form input[type="url"],
  972. #conversejs .pure-form input[type="date"],
  973. #conversejs .pure-form input[type="month"],
  974. #conversejs .pure-form input[type="time"],
  975. #conversejs .pure-form input[type="datetime"],
  976. #conversejs .pure-form input[type="datetime-local"],
  977. #conversejs .pure-form input[type="week"],
  978. #conversejs .pure-form input[type="number"],
  979. #conversejs .pure-form input[type="search"],
  980. #conversejs .pure-form input[type="tel"],
  981. #conversejs .pure-form input[type="color"],
  982. #conversejs .pure-form label {
  983. margin-bottom: 0.3em;
  984. display: block; }
  985. #conversejs .pure-group input:not([type]),
  986. #conversejs .pure-group input[type="text"],
  987. #conversejs .pure-group input[type="password"],
  988. #conversejs .pure-group input[type="email"],
  989. #conversejs .pure-group input[type="url"],
  990. #conversejs .pure-group input[type="date"],
  991. #conversejs .pure-group input[type="month"],
  992. #conversejs .pure-group input[type="time"],
  993. #conversejs .pure-group input[type="datetime"],
  994. #conversejs .pure-group input[type="datetime-local"],
  995. #conversejs .pure-group input[type="week"],
  996. #conversejs .pure-group input[type="number"],
  997. #conversejs .pure-group input[type="search"],
  998. #conversejs .pure-group input[type="tel"],
  999. #conversejs .pure-group input[type="color"] {
  1000. margin-bottom: 0; }
  1001. #conversejs .pure-form-aligned .pure-control-group label {
  1002. margin-bottom: 0.3em;
  1003. text-align: left;
  1004. display: block;
  1005. width: 100%; }
  1006. #conversejs .pure-form-aligned .pure-controls {
  1007. margin: 1.5em 0 0 0; }
  1008. #conversejs .pure-form .pure-help-inline,
  1009. #conversejs .pure-form-message-inline,
  1010. #conversejs .pure-form-message {
  1011. display: block;
  1012. font-size: 0.75em;
  1013. /* Increased bottom padding to make it group with its related input element. */
  1014. padding: 0.2em 0 0.8em; } }
  1015. #conversejs .pure-button {
  1016. /* Structure */
  1017. display: inline-block;
  1018. zoom: 1;
  1019. line-height: normal;
  1020. white-space: nowrap;
  1021. vertical-align: middle;
  1022. text-align: center;
  1023. cursor: pointer;
  1024. -webkit-user-drag: none;
  1025. -webkit-user-select: none;
  1026. -moz-user-select: none;
  1027. -ms-user-select: none;
  1028. user-select: none;
  1029. -webkit-box-sizing: border-box;
  1030. -moz-box-sizing: border-box;
  1031. box-sizing: border-box; }
  1032. #conversejs .pure-button::-moz-focus-inner {
  1033. padding: 0;
  1034. border: 0; }
  1035. #conversejs .pure-button {
  1036. font-family: inherit;
  1037. font-size: 100%;
  1038. padding: 0.5em 1em;
  1039. color: #444;
  1040. /* rgba not supported (IE 8) */
  1041. color: rgba(0, 0, 0, 0.8);
  1042. /* rgba supported */
  1043. border: 1px solid #999;
  1044. /*IE 6/7/8*/
  1045. border: none transparent;
  1046. /*IE9 + everything else*/
  1047. background-color: #E6E6E6;
  1048. text-decoration: none;
  1049. border-radius: 2px; }
  1050. #conversejs .pure-button-hover,
  1051. #conversejs .pure-button:hover,
  1052. #conversejs .pure-button:focus {
  1053. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000',GradientType=0);
  1054. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0, 0, 0, 0.05)), to(rgba(0, 0, 0, 0.1)));
  1055. background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
  1056. background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1));
  1057. background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
  1058. background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1)); }
  1059. #conversejs .pure-button:focus {
  1060. outline: 0; }
  1061. #conversejs .pure-button-active,
  1062. #conversejs .pure-button:active {
  1063. box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.2) inset;
  1064. border-color: #000 \9; }
  1065. #conversejs .pure-button[disabled],
  1066. #conversejs .pure-button-disabled,
  1067. #conversejs .pure-button-disabled:hover,
  1068. #conversejs .pure-button-disabled:focus,
  1069. #conversejs .pure-button-disabled:active {
  1070. border: none;
  1071. background-image: none;
  1072. filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  1073. filter: alpha(opacity=40);
  1074. -khtml-opacity: 0.40;
  1075. -moz-opacity: 0.40;
  1076. opacity: 0.40;
  1077. cursor: not-allowed;
  1078. box-shadow: none; }
  1079. #conversejs .pure-button-hidden {
  1080. display: none; }
  1081. #conversejs .pure-button::-moz-focus-inner {
  1082. padding: 0;
  1083. border: 0; }
  1084. #conversejs .pure-button-primary,
  1085. #conversejs .pure-button-selected,
  1086. #conversejs a.pure-button-primary,
  1087. #conversejs a.pure-button-selected {
  1088. background-color: #0078e7;
  1089. color: #fff; }
  1090. #conversejs *, #conversejs *:before, #conversejs *:after {
  1091. -webkit-box-sizing: border-box;
  1092. -moz-box-sizing: border-box;
  1093. box-sizing: border-box; }
  1094. @media screen and (max-width: 480px) {
  1095. #conversejs {
  1096. margin: 0;
  1097. right: 10px;
  1098. left: 10px;
  1099. bottom: 5px; } }
  1100. @media screen and (max-height: 450px) {
  1101. #conversejs {
  1102. margin: 0;
  1103. right: 10px;
  1104. left: 10px;
  1105. bottom: 5px; } }
  1106. #conversejs ul li {
  1107. height: auto; }
  1108. #conversejs div, #conversejs span, #conversejs h1, #conversejs h2, #conversejs h3, #conversejs h4, #conversejs h5, #conversejs h6, #conversejs p, #conversejs blockquote,
  1109. #conversejs pre, #conversejs a, #conversejs em, #conversejs img, #conversejs strong, #conversejs dl, #conversejs dt, #conversejs dd, #conversejs ol, #conversejs ul, #conversejs li,
  1110. #conversejs fieldset, #conversejs form, #conversejs label, #conversejs legend, #conversejs table, #conversejs caption, #conversejs tbody,
  1111. #conversejs tfoot, #conversejs thead, #conversejs tr, #conversejs th, #conversejs td, #conversejs article, #conversejs aside, #conversejs canvas, #conversejs details,
  1112. #conversejs embed, #conversejs figure, #conversejs figcaption, #conversejs footer, #conversejs header, #conversejs hgroup, #conversejs menu,
  1113. #conversejs nav, #conversejs output, #conversejs ruby, #conversejs section, #conversejs summary, #conversejs time, #conversejs mark, #conversejs audio, #conversejs video {
  1114. margin: 0;
  1115. padding: 0;
  1116. border: 0;
  1117. font: inherit;
  1118. vertical-align: baseline; }
  1119. #conversejs textarea,
  1120. #conversejs input[type=submit], #conversejs input[type=button],
  1121. #conversejs input[type=text], #conversejs input[type=password],
  1122. #conversejs button {
  1123. font-size: 14px;
  1124. padding: 0.25em;
  1125. min-height: 0; }
  1126. #conversejs strong {
  1127. font-weight: 700; }
  1128. #conversejs ol, #conversejs ul {
  1129. list-style: none; }
  1130. #conversejs li {
  1131. height: 10px; }
  1132. #conversejs ul, #conversejs ol, #conversejs dl {
  1133. font: inherit;
  1134. margin: 0; }
  1135. #conversejs a, #conversejs a:visited {
  1136. text-decoration: none;
  1137. color: #2A9D8F;
  1138. text-shadow: none; }
  1139. #converse-embedded-chat,
  1140. #conversejs {
  1141. bottom: 0;
  1142. color: #818479;
  1143. direction: ltr;
  1144. display: block;
  1145. font-family: "Helvetica", "Arial", sans-serif;
  1146. font-size: 14px;
  1147. height: 35px;
  1148. position: fixed;
  1149. right: 0;
  1150. width: auto;
  1151. z-index: 1031; }
  1152. @media screen and (max-height: 450px) {
  1153. #converse-embedded-chat,
  1154. #conversejs {
  1155. width: 100%;
  1156. width: 100vw; } }
  1157. @media screen and (max-width: 480px) {
  1158. #converse-embedded-chat,
  1159. #conversejs {
  1160. width: 100%;
  1161. width: 100vw; } }
  1162. #converse-embedded-chat ::placeholder,
  1163. #conversejs ::placeholder {
  1164. color: #BBB; }
  1165. #converse-embedded-chat .circle,
  1166. #conversejs .circle {
  1167. border-radius: 50%; }
  1168. #converse-embedded-chat ::selection,
  1169. #conversejs ::selection {
  1170. background-color: #DCF9F6; }
  1171. #converse-embedded-chat ::-moz-selection,
  1172. #conversejs ::-moz-selection {
  1173. background-color: #DCF9F6; }
  1174. #converse-embedded-chat .no-text-select,
  1175. #conversejs .no-text-select {
  1176. -webkit-touch-callout: none;
  1177. -webkit-user-select: none;
  1178. -moz-user-select: none;
  1179. -ms-user-select: none;
  1180. user-select: none; }
  1181. #converse-embedded-chat .emoticon,
  1182. #conversejs .emoticon {
  1183. font-size: 14px; }
  1184. #converse-embedded-chat .left,
  1185. #conversejs .left {
  1186. float: left; }
  1187. #converse-embedded-chat .right,
  1188. #conversejs .right {
  1189. float: right; }
  1190. #converse-embedded-chat .centered,
  1191. #conversejs .centered {
  1192. text-align: center;
  1193. display: block;
  1194. margin: 5em auto; }
  1195. #converse-embedded-chat .hor_centered,
  1196. #conversejs .hor_centered {
  1197. text-align: center;
  1198. display: block;
  1199. margin: 0 auto;
  1200. clear: both; }
  1201. @keyframes fadein {
  1202. 0% {
  1203. opacity: 0; }
  1204. 100% {
  1205. opacity: 1; } }
  1206. @-webkit-keyframes fadein {
  1207. 0% {
  1208. opacity: 0; }
  1209. 100% {
  1210. opacity: 1; } }
  1211. #converse-embedded-chat .visible,
  1212. #conversejs .visible {
  1213. visibility: visible;
  1214. opacity: 1;
  1215. -webkit-animation-name: fadein;
  1216. -moz-animation-name: fadein;
  1217. animation-name: fadein;
  1218. -webkit-animation-fill-mode: forwards;
  1219. -moz-animation-fill-mode: forwards;
  1220. animation-fill-mode: forwards;
  1221. -webkit-animation-duration: 350ms;
  1222. -moz-animation-duration: 350ms;
  1223. animation-duration: 350ms;
  1224. -webkit-animation-timing-function: ease;
  1225. -moz-animation-timing-function: ease;
  1226. animation-timing-function: ease; }
  1227. #converse-embedded-chat .hidden,
  1228. #conversejs .hidden {
  1229. opacity: 0;
  1230. display: none; }
  1231. #converse-embedded-chat .locked,
  1232. #conversejs .locked {
  1233. padding-right: 22px; }
  1234. @-webkit-keyframes spin {
  1235. from {
  1236. -webkit-transform: rotate(0deg); }
  1237. to {
  1238. -webkit-transform: rotate(359deg); } }
  1239. @-moz-keyframes spin {
  1240. from {
  1241. -moz-transform: rotate(0deg); }
  1242. to {
  1243. -moz-transform: rotate(359deg); } }
  1244. @keyframes spin {
  1245. from {
  1246. -webkit-transform: rotate(0deg);
  1247. -moz-transform: rotate(0deg);
  1248. -ms-transform: rotate(0deg);
  1249. -o-transform: rotate(0deg);
  1250. transform: rotate(0deg); }
  1251. to {
  1252. -webkit-transform: rotate(359deg);
  1253. -moz-transform: rotate(359deg);
  1254. -ms-transform: rotate(359deg);
  1255. -o-transform: rotate(359deg);
  1256. transform: rotate(359deg); } }
  1257. #converse-embedded-chat .spinner,
  1258. #conversejs .spinner {
  1259. -webkit-animation: spin 2s infinite, linear;
  1260. -moz-animation: spin 2s infinite, linear;
  1261. animation: spin 2s infinite, linear;
  1262. display: block;
  1263. text-align: center;
  1264. margin: 5px; }
  1265. #converse-embedded-chat .spinner:before,
  1266. #conversejs .spinner:before {
  1267. font-size: 24px;
  1268. font-family: 'Converse-js' !important;
  1269. content: "\231b"; }
  1270. #converse-embedded-chat .button-group,
  1271. #converse-embedded-chat .input-button-group,
  1272. #conversejs .button-group,
  1273. #conversejs .input-button-group {
  1274. display: table; }
  1275. #converse-embedded-chat .button-group,
  1276. #conversejs .button-group {
  1277. width: 100%; }
  1278. #converse-embedded-chat .input-button-group button,
  1279. #converse-embedded-chat .input-button-group input,
  1280. #conversejs .input-button-group button,
  1281. #conversejs .input-button-group input {
  1282. display: table-cell; }
  1283. #converse-embedded-chat .error,
  1284. #conversejs .error {
  1285. color: red; }
  1286. #converse-embedded-chat .reg-feedback,
  1287. #conversejs .reg-feedback {
  1288. font-size: 85%; }
  1289. #converse-embedded-chat .reg-feedback,
  1290. #converse-embedded-chat #converse-login .conn-feedback,
  1291. #conversejs .reg-feedback,
  1292. #conversejs #converse-login .conn-feedback {
  1293. display: block;
  1294. text-align: center;
  1295. width: 100%; }
  1296. #converse-embedded-chat a.restore-chat,
  1297. #conversejs a.restore-chat {
  1298. padding: 1px 0 1px 5px;
  1299. color: white;
  1300. line-height: 15px;
  1301. display: block;
  1302. overflow: hidden;
  1303. text-overflow: ellipsis;
  1304. white-space: nowrap; }
  1305. #converse-embedded-chat a.restore-chat:visited,
  1306. #conversejs a.restore-chat:visited {
  1307. color: white; }
  1308. #converse-embedded-chat .activated,
  1309. #conversejs .activated {
  1310. display: block !important; }
  1311. #converse-embedded-chat .pure-button,
  1312. #conversejs .pure-button {
  1313. border-radius: 4px; }
  1314. #converse-embedded-chat .button-primary,
  1315. #conversejs .button-primary {
  1316. color: white;
  1317. background-color: #2AC611; }
  1318. #converse-embedded-chat .button-secondary,
  1319. #conversejs .button-secondary {
  1320. color: white;
  1321. background-color: #83A0D6; }
  1322. #converse-embedded-chat .button-cancel,
  1323. #conversejs .button-cancel {
  1324. color: white;
  1325. background-color: #D24E2B; }
  1326. #converse-embedded-chat form.pure-form.converse-form,
  1327. #conversejs form.pure-form.converse-form {
  1328. background: white;
  1329. padding: 1em; }
  1330. #converse-embedded-chat form.pure-form.converse-form legend,
  1331. #conversejs form.pure-form.converse-form legend {
  1332. color: #818479; }
  1333. #converse-embedded-chat form.pure-form.converse-form label,
  1334. #conversejs form.pure-form.converse-form label {
  1335. margin-top: 1em;
  1336. font-size: 16px; }
  1337. #converse-embedded-chat form.pure-form.converse-form input[type=text],
  1338. #converse-embedded-chat form.pure-form.converse-form input[type=password],
  1339. #converse-embedded-chat form.pure-form.converse-form input[type=number],
  1340. #converse-embedded-chat form.pure-form.converse-form input[type=button],
  1341. #converse-embedded-chat form.pure-form.converse-form input[type=submit],
  1342. #conversejs form.pure-form.converse-form input[type=text],
  1343. #conversejs form.pure-form.converse-form input[type=password],
  1344. #conversejs form.pure-form.converse-form input[type=number],
  1345. #conversejs form.pure-form.converse-form input[type=button],
  1346. #conversejs form.pure-form.converse-form input[type=submit] {
  1347. padding: 0.5em; }
  1348. #converse-embedded-chat form.pure-form.converse-form input[type=button],
  1349. #converse-embedded-chat form.pure-form.converse-form input[type=submit],
  1350. #conversejs form.pure-form.converse-form input[type=button],
  1351. #conversejs form.pure-form.converse-form input[type=submit] {
  1352. padding-left: 1em;
  1353. padding-right: 1em;
  1354. margin: 0.5em 0;
  1355. border: none; }
  1356. #converse-embedded-chat form.pure-form.converse-form input.error,
  1357. #conversejs form.pure-form.converse-form input.error {
  1358. border: 1px solid red;
  1359. color: #818479; }
  1360. #converse-embedded-chat form.pure-form.converse-form .form-help,
  1361. #conversejs form.pure-form.converse-form .form-help {
  1362. color: gray;
  1363. font-size: 85%;
  1364. padding-top: 0.5em; }
  1365. #converse-embedded-chat form.pure-form.converse-form .form-help:hover,
  1366. #conversejs form.pure-form.converse-form .form-help:hover {
  1367. color: #818479; }
  1368. #converse-embedded-chat form.pure-form.converse-centered-form,
  1369. #conversejs form.pure-form.converse-centered-form {
  1370. text-align: center;
  1371. width: 100%; }
  1372. #converse-embedded-chat .chat-textarea-chatbox-selected,
  1373. #conversejs .chat-textarea-chatbox-selected {
  1374. border: 1px solid #578308;
  1375. margin: 0; }
  1376. #converse-embedded-chat .chat-textarea-chatroom-selected,
  1377. #conversejs .chat-textarea-chatroom-selected {
  1378. border: 2px solid #2A9D8F;
  1379. margin: 0; }
  1380. #converse-embedded-chat .dropdown dt,
  1381. #converse-embedded-chat .dropdown ul,
  1382. #conversejs .dropdown dt,
  1383. #conversejs .dropdown ul {
  1384. margin: 0;
  1385. padding: 0; }
  1386. #converse-embedded-chat .flyout,
  1387. #conversejs .flyout {
  1388. border-radius: 4px;
  1389. bottom: 6px;
  1390. display: block;
  1391. position: absolute; }
  1392. @media screen and (max-height: 450px) {
  1393. #converse-embedded-chat .flyout,
  1394. #conversejs .flyout {
  1395. border-radius: 0; } }
  1396. @media screen and (max-width: 480px) {
  1397. #converse-embedded-chat .flyout,
  1398. #conversejs .flyout {
  1399. border-radius: 0; } }
  1400. @media screen and (max-height: 450px) {
  1401. #converse-embedded-chat .flyout,
  1402. #conversejs .flyout {
  1403. bottom: 0; } }
  1404. @media screen and (max-width: 480px) {
  1405. #converse-embedded-chat .flyout,
  1406. #conversejs .flyout {
  1407. bottom: 0; } }
  1408. #converse-embedded-chat .chat-head,
  1409. #conversejs .chat-head {
  1410. border-top-left-radius: 4px;
  1411. border-top-right-radius: 4px;
  1412. color: #ffffff;
  1413. font-size: 100%;
  1414. height: 55px;
  1415. margin: 0;
  1416. padding: 0.5em;
  1417. position: relative; }
  1418. @media screen and (max-height: 450px) {
  1419. #converse-embedded-chat .chat-head,
  1420. #conversejs .chat-head {
  1421. border-top-left-radius: 0;
  1422. border-top-right-radius: 0; } }
  1423. @media screen and (max-width: 480px) {
  1424. #converse-embedded-chat .chat-head,
  1425. #conversejs .chat-head {
  1426. border-top-left-radius: 0;
  1427. border-top-right-radius: 0; } }
  1428. #converse-embedded-chat .chat-head .avatar,
  1429. #conversejs .chat-head .avatar {
  1430. margin-right: 0.5em;
  1431. border-radius: 50%;
  1432. float: left; }
  1433. #converse-embedded-chat .chat-head.chat-head-chatbox,
  1434. #conversejs .chat-head.chat-head-chatbox {
  1435. background-color: #F4A261; }
  1436. #converse-embedded-chat .chat-head .user-custom-message,
  1437. #conversejs .chat-head .user-custom-message {
  1438. color: white;
  1439. font-size: 80%;
  1440. font-style: italic;
  1441. overflow: hidden;
  1442. text-overflow: ellipsis;
  1443. white-space: nowrap;
  1444. margin: 0;
  1445. padding-top: 0.5em; }
  1446. #converse-embedded-chat .chatbox-btn,
  1447. #conversejs .chatbox-btn {
  1448. border-radius: 25%;
  1449. border: none;
  1450. color: white;
  1451. cursor: pointer;
  1452. display: inline-block;
  1453. float: right;
  1454. font-size: 12px;
  1455. margin: 0 0.2em;
  1456. padding: 0.3em;
  1457. text-decoration: none; }
  1458. #converse-embedded-chat .chatbox-btn:active,
  1459. #conversejs .chatbox-btn:active {
  1460. position: relative;
  1461. top: 1px; }
  1462. #converse-embedded-chat .chatbox-btn.button-on,
  1463. #conversejs .chatbox-btn.button-on {
  1464. background-color: white;
  1465. color: #F4A261; }
  1466. #converse-embedded-chat .chatbox,
  1467. #conversejs .chatbox {
  1468. display: block;
  1469. text-align: left;
  1470. float: right;
  1471. height: 35px;
  1472. margin: 0 0.5em;
  1473. width: 200px; }
  1474. @media screen and (max-height: 450px) {
  1475. #converse-embedded-chat .chatbox,
  1476. #conversejs .chatbox {
  1477. margin: 0;
  1478. width: 100%; } }
  1479. @media screen and (max-width: 480px) {
  1480. #converse-embedded-chat .chatbox,
  1481. #conversejs .chatbox {
  1482. margin: 0;
  1483. width: 100%; } }
  1484. #converse-embedded-chat .chatbox .box-flyout,
  1485. #conversejs .chatbox .box-flyout {
  1486. background-color: white;
  1487. box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
  1488. height: 450px;
  1489. min-height: 225px;
  1490. min-width: 200px;
  1491. width: 200px;
  1492. z-index: 1; }
  1493. @media screen and (max-height: 450px) {
  1494. #converse-embedded-chat .chatbox .box-flyout,
  1495. #conversejs .chatbox .box-flyout {
  1496. height: 400px;
  1497. width: 100%;
  1498. height: 100vh; } }
  1499. @media screen and (max-width: 480px) {
  1500. #converse-embedded-chat .chatbox .box-flyout,
  1501. #conversejs .chatbox .box-flyout {
  1502. height: 400px;
  1503. width: 100%;
  1504. height: 100vh; } }
  1505. #converse-embedded-chat .chatbox .chat-title,
  1506. #conversejs .chatbox .chat-title {
  1507. color: white;
  1508. line-height: 15px;
  1509. display: block;
  1510. text-overflow: ellipsis;
  1511. overflow: hidden; }
  1512. #converse-embedded-chat .chatbox .chat-title a,
  1513. #conversejs .chatbox .chat-title a {
  1514. color: white;
  1515. width: 100%; }
  1516. #converse-embedded-chat .chatbox .chat-body,
  1517. #conversejs .chatbox .chat-body {
  1518. background-color: white;
  1519. border-bottom-left-radius: 4px;
  1520. border-bottom-right-radius: 4px;
  1521. border-top: 0;
  1522. height: 289px;
  1523. height: -webkit-calc(100% - 55px);
  1524. height: calc(100% - 55px); }
  1525. @media screen and (max-height: 450px) {
  1526. #converse-embedded-chat .chatbox .chat-body,
  1527. #conversejs .chatbox .chat-body {
  1528. border-bottom-left-radius: 0;
  1529. border-bottom-right-radius: 0; } }
  1530. @media screen and (max-width: 480px) {
  1531. #converse-embedded-chat .chatbox .chat-body,
  1532. #conversejs .chatbox .chat-body {
  1533. border-bottom-left-radius: 0;
  1534. border-bottom-right-radius: 0; } }
  1535. #converse-embedded-chat .chatbox .chat-body p,
  1536. #conversejs .chatbox .chat-body p {
  1537. color: #818479;
  1538. font-size: 14px;
  1539. margin: 0;
  1540. padding: 5px; }
  1541. #converse-embedded-chat .chatbox .chat-body .chat-info,
  1542. #conversejs .chatbox .chat-body .chat-info {
  1543. color: #D24E2B;
  1544. margin: 0.3em; }
  1545. #converse-embedded-chat .chatbox .chat-body .chat-info.chat-event,
  1546. #conversejs .chatbox .chat-body .chat-info.chat-event {
  1547. clear: left;
  1548. font-style: italic; }
  1549. #converse-embedded-chat .chatbox .chat-body .chat-info.chat-error,
  1550. #conversejs .chatbox .chat-body .chat-info.chat-error {
  1551. color: #D24E2B;
  1552. font-weight: bold; }
  1553. #converse-embedded-chat .chatbox .chat-body .chat-info.chat-date,
  1554. #conversejs .chatbox .chat-body .chat-info.chat-date {
  1555. display: inline-block;
  1556. margin-top: 1em; }
  1557. #converse-embedded-chat .chatbox .chat-body .chat-image,
  1558. #conversejs .chatbox .chat-body .chat-image {
  1559. max-width: 100%;
  1560. max-height: 100%; }
  1561. #converse-embedded-chat .chatbox .chat-body .chat-action,
  1562. #conversejs .chatbox .chat-body .chat-action {
  1563. font-style: italic; }
  1564. #converse-embedded-chat .chatbox .chat-body .chat-message,
  1565. #conversejs .chatbox .chat-body .chat-message {
  1566. margin: 0.3em; }
  1567. #converse-embedded-chat .chatbox .chat-body .chat-message span,
  1568. #conversejs .chatbox .chat-body .chat-message span {
  1569. display: inline-block; }
  1570. #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-author,
  1571. #conversejs .chatbox .chat-body .chat-message span.chat-msg-author {
  1572. max-width: 100%;
  1573. font-weight: bold;
  1574. white-space: nowrap;
  1575. float: left;
  1576. text-overflow: ellipsis;
  1577. overflow: hidden; }
  1578. #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-them,
  1579. #conversejs .chatbox .chat-body .chat-message span.chat-msg-them {
  1580. color: #1A9707; }
  1581. #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-me,
  1582. #conversejs .chatbox .chat-body .chat-message span.chat-msg-me {
  1583. color: #2A9D8F; }
  1584. #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-content,
  1585. #conversejs .chatbox .chat-body .chat-message span.chat-msg-content {
  1586. max-width: 100%;
  1587. word-wrap: break-word; }
  1588. #converse-embedded-chat .chatbox .chat-body .delayed .chat-msg-them,
  1589. #conversejs .chatbox .chat-body .delayed .chat-msg-them {
  1590. color: #FB5D50; }
  1591. #converse-embedded-chat .chatbox .chat-body .delayed .chat-msg-me,
  1592. #conversejs .chatbox .chat-body .delayed .chat-msg-me {
  1593. color: #7EABBB; }
  1594. #converse-embedded-chat .chatbox .new-msgs-indicator,
  1595. #conversejs .chatbox .new-msgs-indicator {
  1596. position: absolute;
  1597. width: 100%;
  1598. cursor: pointer;
  1599. background-color: #F4A261;
  1600. color: #FCFDFD;
  1601. padding: 0.3em;
  1602. font-size: 0.9em;
  1603. text-align: center;
  1604. z-index: 20; }
  1605. #converse-embedded-chat .chatbox .chat-content,
  1606. #conversejs .chatbox .chat-content {
  1607. position: relative;
  1608. padding: 0.5em;
  1609. font-size: 13px;
  1610. color: #818479;
  1611. overflow-y: auto;
  1612. border: 0;
  1613. background-color: #ffffff;
  1614. line-height: 1.3em;
  1615. height: 206px;
  1616. height: calc(100% - 96px); }
  1617. #converse-embedded-chat .chatbox .dropdown,
  1618. #conversejs .chatbox .dropdown {
  1619. /* status dropdown styles */
  1620. background-color: #FCFDFD; }
  1621. #converse-embedded-chat .chatbox .dropdown dd,
  1622. #conversejs .chatbox .dropdown dd {
  1623. margin: 0;
  1624. padding: 0;
  1625. position: relative; }
  1626. #converse-embedded-chat .chatbox form.sendXMPPMessage,
  1627. #conversejs .chatbox form.sendXMPPMessage {
  1628. -moz-background-clip: padding;
  1629. -webkit-background-clip: padding-box;
  1630. border-bottom-left-radius: 4px;
  1631. border-bottom-right-radius: 4px;
  1632. background-clip: padding-box;
  1633. background: white;
  1634. border-top: 1px solid #BBB;
  1635. border: 0;
  1636. margin: 0;
  1637. padding: 0;
  1638. position: relative;
  1639. height: 95px;
  1640. min-width: 200px; }
  1641. @media screen and (max-height: 450px) {
  1642. #converse-embedded-chat .chatbox form.sendXMPPMessage,
  1643. #conversejs .chatbox form.sendXMPPMessage {
  1644. width: 100%; } }
  1645. @media screen and (max-width: 480px) {
  1646. #converse-embedded-chat .chatbox form.sendXMPPMessage,
  1647. #conversejs .chatbox form.sendXMPPMessage {
  1648. width: 100%; } }
  1649. #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-textarea,
  1650. #conversejs .chatbox form.sendXMPPMessage .chat-textarea {
  1651. border-bottom-left-radius: 4px;
  1652. border-bottom-right-radius: 4px;
  1653. border: 0;
  1654. height: 70px;
  1655. padding: 0.5em;
  1656. width: 100%;
  1657. resize: none; }
  1658. #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar,
  1659. #conversejs .chatbox form.sendXMPPMessage .chat-toolbar {
  1660. box-sizing: border-box;
  1661. font-size: 14px;
  1662. margin: 0;
  1663. padding: 5px;
  1664. height: 25px;
  1665. display: block;
  1666. background-color: #FFF5EE; }
  1667. #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar a,
  1668. #conversejs .chatbox form.sendXMPPMessage .chat-toolbar a {
  1669. font-size: 14px;
  1670. color: #2A9D8F;
  1671. text-decoration: none;
  1672. text-shadow: none; }
  1673. #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text,
  1674. #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text {
  1675. font-size: 12px;
  1676. padding-right: 3px;
  1677. text-shadow: 0 1px 0 white; }
  1678. #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a,
  1679. #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted,
  1680. #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a,
  1681. #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted {
  1682. color: #D24E2B; }
  1683. #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified a,
  1684. #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified,
  1685. #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unverified a,
  1686. #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unverified {
  1687. color: #cf5300; }
  1688. #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .private a,
  1689. #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .private,
  1690. #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .private a,
  1691. #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .private {
  1692. color: #4b7003; }
  1693. #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-occupants,
  1694. #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-clear,
  1695. #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr,
  1696. #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-occupants,
  1697. #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-clear,
  1698. #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr {
  1699. float: right; }
  1700. #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li,
  1701. #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li {
  1702. display: inline-block;
  1703. list-style: none;
  1704. padding: 0 3px 0 3px;
  1705. cursor: pointer;
  1706. margin-top: 1px; }
  1707. #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li:hover,
  1708. #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li:hover {
  1709. cursor: pointer; }
  1710. #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar ul,
  1711. #conversejs .chatbox form.sendXMPPMessage .chat-toolbar ul {
  1712. background: #fff;
  1713. bottom: 100%;
  1714. box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
  1715. display: none;
  1716. font-size: 12px;
  1717. margin: 0;
  1718. position: absolute;
  1719. right: 0; }
  1720. #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar ul li,
  1721. #conversejs .chatbox form.sendXMPPMessage .chat-toolbar ul li {
  1722. cursor: pointer;
  1723. list-style: none;
  1724. position: relative; }
  1725. #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar ul li a:hover,
  1726. #conversejs .chatbox form.sendXMPPMessage .chat-toolbar ul li a:hover {
  1727. color: #8f2831; }
  1728. #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li,
  1729. #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li {
  1730. margin-left: 0; }
  1731. #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley,
  1732. #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley {
  1733. color: #2A9D8F;
  1734. padding-left: 5px; }
  1735. #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul,
  1736. #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul {
  1737. left: 0; }
  1738. #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li,
  1739. #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li {
  1740. font-size: 14px;
  1741. padding: 5px;
  1742. z-index: 98; }
  1743. #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li:hover,
  1744. #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li:hover {
  1745. background-color: #DCF9F6; }
  1746. #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li,
  1747. #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li {
  1748. padding: 7px;
  1749. background-color: white;
  1750. display: block;
  1751. z-index: 99; }
  1752. #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li a,
  1753. #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li a {
  1754. -moz-transition: background-color 0.2s ease-in-out;
  1755. -webkit-transition: background-color 0.2s ease-in-out;
  1756. transition: background-color 0.2s ease-in-out;
  1757. display: block;
  1758. padding: 1px;
  1759. text-decoration: none; }
  1760. #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li:hover,
  1761. #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li:hover {
  1762. background-color: #DCF9F6; }
  1763. #converse-embedded-chat .chatbox .dragresize,
  1764. #conversejs .chatbox .dragresize {
  1765. background: transparent;
  1766. border: 0;
  1767. margin: 0;
  1768. position: absolute;
  1769. top: 0;
  1770. z-index: 20; }
  1771. #converse-embedded-chat .chatbox .dragresize-top,
  1772. #conversejs .chatbox .dragresize-top {
  1773. cursor: n-resize;
  1774. height: 5px;
  1775. width: 100%; }
  1776. #converse-embedded-chat .chatbox .dragresize-left,
  1777. #conversejs .chatbox .dragresize-left {
  1778. cursor: w-resize;
  1779. width: 5px;
  1780. height: 100%;
  1781. left: 0; }
  1782. #converse-embedded-chat .chatbox .dragresize-topleft,
  1783. #conversejs .chatbox .dragresize-topleft {
  1784. cursor: nw-resize;
  1785. width: 15px;
  1786. height: 15px;
  1787. top: 0;
  1788. left: 0; }
  1789. #conversejs #controlbox {
  1790. margin-right: 1em; }
  1791. @media screen and (max-width: 480px) {
  1792. #conversejs #controlbox {
  1793. margin: 0; } }
  1794. @media screen and (max-height: 450px) {
  1795. #conversejs #controlbox {
  1796. margin: 0; } }
  1797. #conversejs #controlbox .controlbox-head {
  1798. background-color: #577BDD;
  1799. border-top-left-radius: 4px;
  1800. border-top-right-radius: 4px;
  1801. color: white;
  1802. height: 55px;
  1803. margin: 0;
  1804. padding: 6px 6px 6px 0; }
  1805. @media screen and (max-height: 450px) {
  1806. #conversejs #controlbox .controlbox-head {
  1807. border-top-left-radius: 0;
  1808. border-top-right-radius: 0; } }
  1809. @media screen and (max-width: 480px) {
  1810. #conversejs #controlbox .controlbox-head {
  1811. border-top-left-radius: 0;
  1812. border-top-right-radius: 0; } }
  1813. #conversejs #controlbox form.search-xmpp-contact {
  1814. margin: 0;
  1815. padding-left: 5px;
  1816. padding: 0 0 5px 5px; }
  1817. #conversejs #controlbox form.search-xmpp-contact input {
  1818. width: 8em; }
  1819. #conversejs #controlbox a.subscribe-to-user {
  1820. padding-left: 2em;
  1821. font-weight: bold; }
  1822. #conversejs #controlbox #converse-register {
  1823. background: white; }
  1824. #conversejs #controlbox #converse-register .title {
  1825. font-weight: bold; }
  1826. #conversejs #controlbox #converse-register .info {
  1827. font-style: italic;
  1828. color: green;
  1829. font-size: 85%;
  1830. margin: 5px 0; }
  1831. #conversejs #controlbox #converse-register .form-errors {
  1832. color: red;
  1833. display: none; }
  1834. #conversejs #controlbox #converse-register .provider-title {
  1835. font-size: 22px; }
  1836. #conversejs #controlbox #converse-register .provider-score {
  1837. width: 178px;
  1838. margin-bottom: 8px; }
  1839. #conversejs #controlbox #converse-register .form-help .url {
  1840. font-weight: bold;
  1841. color: #2A9D8F; }
  1842. #conversejs #controlbox #converse-register .input-group {
  1843. display: table;
  1844. margin: auto;
  1845. width: 100%; }
  1846. #conversejs #controlbox #converse-register .input-group span {
  1847. overflow-x: hidden;
  1848. text-overflow: ellipsis;
  1849. max-width: 110px; }
  1850. #conversejs #controlbox #converse-register .input-group span, #conversejs #controlbox #converse-register .input-group input[name=username] {
  1851. display: table-cell;
  1852. text-align: left; }
  1853. #conversejs #controlbox #converse-register .instructions {
  1854. color: gray;
  1855. font-size: 85%; }
  1856. #conversejs #controlbox #converse-register .instructions:hover {
  1857. color: #818479; }
  1858. #conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login {
  1859. margin-top: 2em; }
  1860. #conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
  1861. height: auto;
  1862. white-space: normal; }
  1863. #conversejs #controlbox #converse-register .save-submit, #conversejs #controlbox #converse-login .save-submit {
  1864. color: #436F64; }
  1865. #conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input {
  1866. width: 100%;
  1867. margin: 0.5em 0; }
  1868. #conversejs #controlbox #users .add-converse-contact {
  1869. margin: 0 1em 0.75em 1em; }
  1870. #conversejs #controlbox #chatrooms form.add-chatroom input[type=button],
  1871. #conversejs #controlbox #chatrooms form.add-chatroom input[type=submit],
  1872. #conversejs #controlbox #chatrooms form.add-chatroom input[type=text] {
  1873. width: 100%; }
  1874. #conversejs #controlbox #chatrooms dl.rooms-list {
  1875. margin: 0 1em;
  1876. padding: 0;
  1877. text-align: left; }
  1878. #conversejs #controlbox #chatrooms dl.rooms-list dt {
  1879. border: none;
  1880. color: #818479;
  1881. font-weight: normal;
  1882. padding: 0;
  1883. padding-bottom: 0.5em;
  1884. text-shadow: 0 1px 0 #FAFAFA; }
  1885. #conversejs #controlbox #chatrooms dl.rooms-list dd.available-chatroom {
  1886. border: none;
  1887. clear: both;
  1888. color: #818479;
  1889. display: block;
  1890. overflow: hidden;
  1891. padding: 0.1em;
  1892. text-shadow: 0 1px 0 #FAFAFA;
  1893. word-wrap: break-word; }
  1894. #conversejs #controlbox #chatrooms dl.rooms-list dd.available-chatroom:hover {
  1895. background-color: #DCF9F6; }
  1896. #conversejs #controlbox #chatrooms dl.rooms-list dd.available-chatroom a.room-info {
  1897. clear: right;
  1898. display: block; }
  1899. #conversejs #controlbox #chatrooms dl.rooms-list dd.available-chatroom a.room-info:before {
  1900. font-size: 15px; }
  1901. #conversejs #controlbox #chatrooms dl.rooms-list dd.available-chatroom a.open-room {
  1902. float: left;
  1903. width: 85%; }
  1904. #conversejs #controlbox #chatrooms dl.rooms-list dd.available-chatroom .room-info {
  1905. font-size: 12px;
  1906. font-style: normal;
  1907. font-weight: normal; }
  1908. #conversejs #controlbox #chatrooms dl.rooms-list dd.available-chatroom li.room-info {
  1909. display: block;
  1910. margin-left: 5px; }
  1911. #conversejs #controlbox #chatrooms dl.rooms-list dd.available-chatroom p.room-info {
  1912. margin: 0;
  1913. padding: 0;
  1914. display: block;
  1915. white-space: normal; }
  1916. #conversejs #controlbox #chatrooms dl.rooms-list dd.available-chatroom div.room-info {
  1917. clear: left;
  1918. width: 100%; }
  1919. #conversejs #controlbox .dropdown {
  1920. /* Custom addition for CSP */ }
  1921. #conversejs #controlbox .dropdown a {
  1922. width: 148px;
  1923. display: inline-block;
  1924. line-height: 25px; }
  1925. #conversejs #controlbox .dropdown li {
  1926. list-style: none;
  1927. padding-left: 0; }
  1928. #conversejs #controlbox .dropdown dd ul {
  1929. padding: 0;
  1930. list-style: none;
  1931. position: absolute;
  1932. left: 0;
  1933. top: 0;
  1934. border: 1px solid #B1BFC4;
  1935. width: 100%;
  1936. z-index: 21;
  1937. background-color: #FCFDFD; }
  1938. #conversejs #controlbox .dropdown dd ul li:hover {
  1939. background-color: #DCF9F6; }
  1940. #conversejs #controlbox .dropdown dd.search-xmpp {
  1941. display: none; }
  1942. #conversejs #controlbox .dropdown dd.search-xmpp ul {
  1943. box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.4); }
  1944. #conversejs #controlbox .dropdown dd.search-xmpp ul li:hover {
  1945. background-color: #FCFDFD; }
  1946. #conversejs #controlbox .dropdown dt a span {
  1947. cursor: pointer;
  1948. display: block;
  1949. padding: 4px 7px 0 5px; }
  1950. #conversejs #controlbox #select-xmpp-status {
  1951. float: right;
  1952. margin-right: 0.5em; }
  1953. #conversejs #controlbox #set-custom-xmpp-status {
  1954. float: left;
  1955. padding: 0; }
  1956. #conversejs #controlbox #set-custom-xmpp-status fieldset {
  1957. padding: 0;
  1958. margin-top: -1px; }
  1959. #conversejs #controlbox #set-custom-xmpp-status input {
  1960. height: 26px;
  1961. width: -webkit-calc(100% - 40px);
  1962. width: calc(100% - 40px);
  1963. padding: 0 0 0 0.5em; }
  1964. #conversejs #controlbox #set-custom-xmpp-status input[type=submit] {
  1965. height: 26px;
  1966. width: 40px;
  1967. padding: 1px;
  1968. float: right; }
  1969. #conversejs #controlbox #controlbox-tabs {
  1970. text-align: center;
  1971. display: inline;
  1972. overflow: hidden;
  1973. font-size: 12px;
  1974. list-style-type: none;
  1975. /* single tab */ }
  1976. #conversejs #controlbox #controlbox-tabs li {
  1977. float: left;
  1978. list-style: none;
  1979. padding-left: 0;
  1980. text-shadow: white 0 1px 0;
  1981. width: 40%; }
  1982. #conversejs #controlbox #controlbox-tabs li a {
  1983. background-color: white;
  1984. border-bottom: 1px solid #CCC;
  1985. border-top-left-radius: 4px;
  1986. border-top-right-radius: 4px;
  1987. box-shadow: inset 2px -2px 20px rgba(0, 0, 0, 0.3);
  1988. color: #818479;
  1989. display: block;
  1990. font-size: 12px;
  1991. height: 54px;
  1992. line-height: 54px;
  1993. margin: 0;
  1994. text-align: center;
  1995. text-decoration: none; }
  1996. #conversejs #controlbox #controlbox-tabs li a:hover {
  1997. color: #818479; }
  1998. #conversejs #controlbox #controlbox-tabs li a.current, #conversejs #controlbox #controlbox-tabs li a.current:hover {
  1999. box-shadow: none;
  2000. border-bottom: 0;
  2001. height: 55px;
  2002. cursor: default;
  2003. color: #818479; }
  2004. #conversejs #controlbox .fancy-dropdown {
  2005. border: 1px solid #B1BFC4;
  2006. height: 25px;
  2007. border-radius: 4px;
  2008. text-align: left;
  2009. padding: 0;
  2010. padding-left: 0.3em; }
  2011. #conversejs #controlbox .fancy-dropdown .choose-xmpp-status,
  2012. #conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form {
  2013. text-shadow: 0 1px 0 #ffffff;
  2014. overflow: hidden;
  2015. text-overflow: ellipsis;
  2016. white-space: nowrap;
  2017. display: inline-block; }
  2018. #conversejs #controlbox .fancy-dropdown.no-border {
  2019. border: 0; }
  2020. #conversejs #controlbox #fancy-xmpp-status-select {
  2021. padding-left: 0; }
  2022. #conversejs #controlbox #fancy-xmpp-status-select .xmpp-status {
  2023. margin-left: 0.3em;
  2024. display: inline; }
  2025. #conversejs #controlbox #fancy-xmpp-status-select a.change-xmpp-status-message {
  2026. float: right;
  2027. clear: right;
  2028. width: 12px;
  2029. margin-right: 0.3em;
  2030. color: #2A9D8F; }
  2031. #conversejs #controlbox .controlbox-pane {
  2032. background-color: white;
  2033. border-bottom-left-radius: 4px;
  2034. border-bottom-right-radius: 4px;
  2035. border: 0;
  2036. font-size: 14px;
  2037. position: absolute;
  2038. text-align: center;
  2039. width: 100%;
  2040. height: 289px;
  2041. height: -webkit-calc(100% - 55px);
  2042. height: calc(100% - 55px);
  2043. overflow-y: auto;
  2044. overflow-x: hidden; }
  2045. #conversejs #controlbox .controlbox-pane label {
  2046. font-size: 14px;
  2047. font-weight: bold;
  2048. height: auto;
  2049. margin: 4px; }
  2050. #conversejs #controlbox .controlbox-pane dd {
  2051. margin-left: 0;
  2052. margin-bottom: 0; }
  2053. #conversejs #controlbox .controlbox-pane dd.odd {
  2054. background-color: #DCEAC5; }
  2055. #conversejs #controlbox #users {
  2056. overflow-y: hidden; }
  2057. #conversejs #controlbox .add-xmpp-contact {
  2058. background: none;
  2059. padding: 1em; }
  2060. #conversejs #controlbox .add-xmpp-contact input {
  2061. margin: 0 0 1rem;
  2062. width: 100%; }
  2063. #conversejs #controlbox .add-xmpp-contact button {
  2064. width: 100%; }
  2065. #conversejs #controlbox .xmpp-status-menu {
  2066. text-align: left;
  2067. box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.4); }
  2068. #conversejs #controlbox .xmpp-status-menu li {
  2069. padding: 2px; }
  2070. #conversejs #controlbox .xmpp-status-menu li a {
  2071. width: 100%;
  2072. padding: 0 8px; }
  2073. #conversejs #controlbox .xmpp-status-menu li a.logout,
  2074. #conversejs #controlbox .xmpp-status-menu li a.logout span {
  2075. color: #D24E2B; }
  2076. #conversejs #controlbox .set-xmpp-status {
  2077. background: none;
  2078. margin: 1em 1em 0.5em 1em; }
  2079. #conversejs #controlbox .set-xmpp-status .dropdown dd ul {
  2080. z-index: 22; }
  2081. #conversejs .toggle-controlbox {
  2082. background-color: #2A9D8F;
  2083. border-top-left-radius: 4px;
  2084. border-top-right-radius: 4px;
  2085. color: #0a0a0a;
  2086. float: right;
  2087. height: 100%;
  2088. margin: 0 0.5em;
  2089. padding: 10px 8px 0 8px; }
  2090. #conversejs .toggle-controlbox span {
  2091. color: white; }
  2092. #conversejs #converse-roster {
  2093. text-align: left;
  2094. width: 100%;
  2095. position: relative;
  2096. margin: 1em 0 0 0;
  2097. height: 194px;
  2098. height: calc(100% - 50px - 20px);
  2099. overflow: hidden;
  2100. padding: 0;
  2101. padding-bottom: 3em;
  2102. /* Custom addition for CSP */ }
  2103. #conversejs #converse-roster.no-contact-requests {
  2104. height: calc(100% - 25px - 20px); }
  2105. #conversejs #converse-roster #online-count {
  2106. display: none; }
  2107. #conversejs #converse-roster .search-xmpp ul li.chat-info {
  2108. padding-left: 10px; }
  2109. #conversejs #converse-roster .roster-filter-form {
  2110. margin: 0 1em;
  2111. width: 100%;
  2112. padding-right: 2em;
  2113. /* (jQ addClass:) if input has value: */
  2114. /* (jQ addClass:) if mouse is over the 'x' input area*/ }
  2115. #conversejs #converse-roster .roster-filter-form .roster-filter {
  2116. float: left;
  2117. background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg==) no-repeat right -20px center;
  2118. border: 1px solid #999;
  2119. font-size: 14px;
  2120. height: 25px;
  2121. margin: 0;
  2122. padding: 0;
  2123. padding-left: 0.4em;
  2124. width: 53%; }
  2125. #conversejs #converse-roster .roster-filter-form .roster-filter.x {
  2126. background-position: right 3px center; }
  2127. #conversejs #converse-roster .roster-filter-form .roster-filter.onX {
  2128. cursor: pointer; }
  2129. #conversejs #converse-roster .roster-filter-form .state-type {
  2130. float: left;
  2131. border: 1px solid #999;
  2132. font-size: calc(14px - 2px);
  2133. height: 25px;
  2134. margin: 0;
  2135. padding: 0;
  2136. padding-left: 0.4em;
  2137. width: 53%; }
  2138. #conversejs #converse-roster .roster-filter-form .filter-type {
  2139. display: table-cell;
  2140. float: right;
  2141. font-size: calc(14px - 2px);
  2142. height: 25px;
  2143. padding: 0;
  2144. width: 47%;
  2145. border-radius: 0;
  2146. border: 1px solid; }
  2147. #conversejs #converse-roster .roster-contacts {
  2148. margin: 0;
  2149. height: 100%;
  2150. overflow-x: hidden;
  2151. overflow-y: auto; }
  2152. #conversejs #converse-roster .roster-contacts dt.roster-group {
  2153. border: none;
  2154. color: #818479;
  2155. display: none;
  2156. font-weight: normal;
  2157. margin-top: 0.5em;
  2158. padding: 0.5em 1em;
  2159. text-shadow: 0 1px 0 #FAFAFA; }
  2160. #conversejs #converse-roster .roster-contacts dt.roster-group:hover {
  2161. background-color: #DCF9F6; }
  2162. #conversejs #converse-roster .roster-contacts dt.roster-group .group-toggle {
  2163. color: #818479;
  2164. display: block;
  2165. width: 100%; }
  2166. #conversejs #converse-roster .roster-contacts dd {
  2167. border: none;
  2168. clear: both;
  2169. color: #818479;
  2170. background-color: #FCFDFD;
  2171. display: block;
  2172. height: 24px;
  2173. overflow-y: hidden;
  2174. padding: 0.3em 1em;
  2175. text-shadow: 0 1px 0 #FAFAFA;
  2176. line-height: 16px;
  2177. width: 100%; }
  2178. #conversejs #converse-roster .roster-contacts dd .open-chat {
  2179. max-width: 90%; }
  2180. #conversejs #converse-roster .roster-contacts dd:hover {
  2181. background-color: #DCF9F6; }
  2182. #conversejs #converse-roster .roster-contacts dd:hover .remove-xmpp-contact {
  2183. display: inline-block; }
  2184. #conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .request-actions {
  2185. margin-left: 0.3em;
  2186. margin-bottom: 0.3em;
  2187. float: right; }
  2188. #conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .open-chat {
  2189. max-width: 75%; }
  2190. #conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .open-chat .req-contact-name {
  2191. width: 100%; }
  2192. #conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .req-contact-name {
  2193. line-height: 16px;
  2194. width: 69%;
  2195. padding: 0; }
  2196. #conversejs #converse-roster .roster-contacts dd.current-xmpp-contact span {
  2197. font-size: 16px;
  2198. float: left;
  2199. color: #2A9D8F;
  2200. padding-right: 0.5em; }
  2201. #conversejs #converse-roster .roster-contacts dd.odd {
  2202. background-color: #DCEAC5;
  2203. /* Make this difference */ }
  2204. #conversejs #converse-roster .roster-contacts dd a, #conversejs #converse-roster .roster-contacts dd span {
  2205. text-shadow: 0 1px 0 #FAFAFA;
  2206. display: inline-block;
  2207. overflow: hidden;
  2208. white-space: nowrap;
  2209. text-overflow: ellipsis; }
  2210. #conversejs #converse-roster .roster-contacts dd span {
  2211. padding: 0;
  2212. height: 100%; }
  2213. #conversejs #converse-roster .roster-contacts dd a.decline-xmpp-request {
  2214. margin-left: 5px; }
  2215. #conversejs #converse-roster .roster-contacts dd a.remove-xmpp-contact {
  2216. float: right;
  2217. display: none;
  2218. color: #818479; }
  2219. #conversejs #converse-roster span.pending-contact-name {
  2220. line-height: 16px;
  2221. width: 100%; }
  2222. #converse-embedded-chat .new-chatroom-nick,
  2223. #conversejs .new-chatroom-nick {
  2224. margin: 1em auto; }
  2225. #converse-embedded-chat .add-chatroom input[type="submit"],
  2226. #converse-embedded-chat .add-chatroom input[type="button"],
  2227. #conversejs .add-chatroom input[type="submit"],
  2228. #conversejs .add-chatroom input[type="button"] {
  2229. margin: 0.3em 0; }
  2230. #converse-embedded-chat .chat-head-chatroom,
  2231. #conversejs .chat-head-chatroom {
  2232. background-color: #E76F51; }
  2233. #converse-embedded-chat .chat-head-chatroom .chatbox-btn.button-on,
  2234. #conversejs .chat-head-chatroom .chatbox-btn.button-on {
  2235. background-color: white;
  2236. color: #E76F51; }
  2237. #converse-embedded-chat .chat-head-chatroom .chatroom-description,
  2238. #conversejs .chat-head-chatroom .chatroom-description {
  2239. color: white;
  2240. font-size: 80%;
  2241. font-style: italic;
  2242. height: 1.3em;
  2243. overflow: hidden;
  2244. text-overflow: ellipsis;
  2245. white-space: nowrap;
  2246. margin: 0;
  2247. margin-top: 0.3em; }
  2248. #converse-embedded-chat .chatroom,
  2249. #conversejs .chatroom {
  2250. width: 300px; }
  2251. @media screen and (max-height: 450px) {
  2252. #converse-embedded-chat .chatroom,
  2253. #conversejs .chatroom {
  2254. width: 100%; } }
  2255. @media screen and (max-width: 480px) {
  2256. #converse-embedded-chat .chatroom,
  2257. #conversejs .chatroom {
  2258. width: 100%; } }
  2259. #converse-embedded-chat .chatroom .box-flyout,
  2260. #conversejs .chatroom .box-flyout {
  2261. min-width: 300px;
  2262. width: 300px; }
  2263. @media screen and (max-height: 450px) {
  2264. #converse-embedded-chat .chatroom .box-flyout,
  2265. #conversejs .chatroom .box-flyout {
  2266. height: 400px;
  2267. width: 100%;
  2268. height: 100vh; } }
  2269. @media screen and (max-width: 480px) {
  2270. #converse-embedded-chat .chatroom .box-flyout,
  2271. #conversejs .chatroom .box-flyout {
  2272. height: 400px;
  2273. width: 100%;
  2274. height: 100vh; } }
  2275. #converse-embedded-chat .chatroom .box-flyout .chatroom-body,
  2276. #conversejs .chatroom .box-flyout .chatroom-body {
  2277. height: 289px;
  2278. border-bottom-left-radius: 4px;
  2279. border-bottom-right-radius: 4px;
  2280. height: -webkit-calc(100% - 55px);
  2281. height: calc(100% - 55px);
  2282. background-color: white;
  2283. border-top: 0;
  2284. width: 100%; }
  2285. #converse-embedded-chat .chatroom .box-flyout .chatroom-body .mentioned,
  2286. #conversejs .chatroom .box-flyout .chatroom-body .mentioned {
  2287. font-weight: bold; }
  2288. #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-msg-room,
  2289. #conversejs .chatroom .box-flyout .chatroom-body .chat-msg-room {
  2290. color: #1A9707; }
  2291. #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area,
  2292. #conversejs .chatroom .box-flyout .chatroom-body .chat-area {
  2293. word-wrap: break-word;
  2294. height: 100%;
  2295. width: 70%;
  2296. float: left;
  2297. min-width: 200px; }
  2298. #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator,
  2299. #conversejs .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator {
  2300. background-color: #E76F51;
  2301. max-width: 70%; }
  2302. #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .chat-content,
  2303. #conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
  2304. padding: 0 0.5em 0 0.5em; }
  2305. #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area.full,
  2306. #conversejs .chatroom .box-flyout .chatroom-body .chat-area.full {
  2307. min-width: 100%; }
  2308. #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator,
  2309. #conversejs .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator {
  2310. min-width: 100%; }
  2311. #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants,
  2312. #conversejs .chatroom .box-flyout .chatroom-body .occupants {
  2313. overflow-x: hidden;
  2314. overflow-y: hidden;
  2315. float: right;
  2316. vertical-align: top;
  2317. background-color: white;
  2318. border-left: 1px solid #818479;
  2319. border-bottom-right-radius: 4px;
  2320. width: 30%;
  2321. height: 100%;
  2322. padding: 0.5em; }
  2323. #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .occupants-heading,
  2324. #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
  2325. padding: 0.3em 0;
  2326. font-weight: bold; }
  2327. #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .chatroom-features,
  2328. #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
  2329. position: absolute;
  2330. bottom: 0.5em;
  2331. width: 25%;
  2332. width: -webkit-calc(30% - 1em);
  2333. width: calc(30% - 1em); }
  2334. #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul,
  2335. #conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul {
  2336. padding: 0.2em; }
  2337. #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul,
  2338. #conversejs .chatroom .box-flyout .chatroom-body .occupants ul {
  2339. padding: 0.3em 0;
  2340. overflow-x: hidden;
  2341. overflow-y: auto;
  2342. list-style: none; }
  2343. #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list,
  2344. #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list {
  2345. overflow-y: auto;
  2346. height: -webkit-calc(100% - 220px);
  2347. height: calc(100% - 220px); }
  2348. #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.features-list,
  2349. #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list {
  2350. padding-top: 0; }
  2351. #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li,
  2352. #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li {
  2353. cursor: default;
  2354. display: block;
  2355. font-size: 12px;
  2356. overflow: hidden;
  2357. padding: 0.2em 0.5em 0.2em 0;
  2358. text-overflow: ellipsis;
  2359. white-space: nowrap; }
  2360. #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li [class^="icon-"], #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li [class*=" icon-"],
  2361. #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li [class^="icon-"],
  2362. #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li [class*=" icon-"] {
  2363. padding-right: 0.5em; }
  2364. #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.feature,
  2365. #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.feature {
  2366. font-size: 10px; }
  2367. #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant,
  2368. #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant {
  2369. cursor: pointer; }
  2370. #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status,
  2371. #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status {
  2372. display: inline-block;
  2373. margin-right: 0.5em;
  2374. width: 0.5em;
  2375. height: 0.5em; }
  2376. #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-online, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-chat,
  2377. #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-online,
  2378. #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-chat {
  2379. background-color: #1A9707; }
  2380. #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-dnd,
  2381. #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-dnd {
  2382. background-color: red; }
  2383. #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-away,
  2384. #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-away {
  2385. background-color: darkorange; }
  2386. #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-xa,
  2387. #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-xa {
  2388. background-color: orange; }
  2389. #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.moderator,
  2390. #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.moderator {
  2391. color: #D24E2B; }
  2392. #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container,
  2393. #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container {
  2394. background-color: white;
  2395. border-bottom-left-radius: 4px;
  2396. border-bottom-right-radius: 4px;
  2397. border: 0;
  2398. color: #818479;
  2399. font-size: 14px;
  2400. height: 289px;
  2401. width: 100%;
  2402. height: -webkit-calc(100% - 55px);
  2403. height: calc(100% - 55px);
  2404. overflow-y: auto;
  2405. position: absolute; }
  2406. #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .validation-message,
  2407. #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .validation-message {
  2408. font-size: 90%;
  2409. color: #D24E2B; }
  2410. #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
  2411. #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text],
  2412. #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
  2413. #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text] {
  2414. display: block; }
  2415. #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button],
  2416. #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=submit],
  2417. #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button],
  2418. #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=submit] {
  2419. margin: 0 0.5em; }
  2420. #converse-embedded-chat .chatroom .chat-textarea,
  2421. #conversejs .chatroom .chat-textarea {
  2422. border-bottom-right-radius: 0; }
  2423. #converse-embedded-chat .chatroom .room-invite .invited-contact,
  2424. #conversejs .chatroom .room-invite .invited-contact {
  2425. margin: -1px 0 0 -1px;
  2426. width: 100%;
  2427. border: 1px solid #999; }
  2428. #conversejs .chatbox.headlines .chat-head.chat-head-chatbox {
  2429. background-color: #2A9D8F; }
  2430. #conversejs #minimized-chats {
  2431. border-top-left-radius: 4px;
  2432. border-top-right-radius: 4px;
  2433. color: white;
  2434. float: right;
  2435. font-weight: bold;
  2436. height: 100%;
  2437. margin: 0 0.5em;
  2438. padding: 0;
  2439. width: 130px; }
  2440. #conversejs #minimized-chats #toggle-minimized-chats {
  2441. border-top-left-radius: 4px;
  2442. border-top-right-radius: 4px;
  2443. background-color: #2A9D8F;
  2444. color: white;
  2445. position: relative;
  2446. padding: 10px 0 0 0;
  2447. display: block;
  2448. width: 100%;
  2449. height: 100%;
  2450. text-align: center; }
  2451. #conversejs #minimized-chats .minimized-chats-flyout {
  2452. height: auto;
  2453. bottom: 35px; }
  2454. #conversejs #minimized-chats .minimized-chats-flyout .chat-head {
  2455. padding: 0.3em;
  2456. border-radius: 4px;
  2457. width: 130px;
  2458. height: 35px;
  2459. margin-bottom: 0.2em;
  2460. box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4); }
  2461. #conversejs #minimized-chats .minimized-chats-flyout.minimized {
  2462. height: auto; }
  2463. #conversejs #minimized-chats .unread-message-count,
  2464. #conversejs #minimized-chats .chat-head-message-count {
  2465. font-weight: bold;
  2466. background-color: white;
  2467. border: 1px solid;
  2468. text-shadow: 1px 1px 0 #FAFAFA;
  2469. color: #D24E2B;
  2470. border-radius: 5px;
  2471. padding: 2px 4px;
  2472. font-size: 16px;
  2473. text-align: center;
  2474. position: absolute;
  2475. right: 116px;
  2476. bottom: 10px; }
  2477. #conversejs #controlbox #chatrooms .bookmarks-list {
  2478. padding-top: 1em; }
  2479. #conversejs #controlbox #chatrooms .bookmarks-list .bookmarks-toggle {
  2480. display: block;
  2481. font-weight: bold;
  2482. color: #818479;
  2483. margin-bottom: 0.5em; }
  2484. #conversejs #controlbox #chatrooms .bookmarks-list dl.rooms-list.bookmarks dd.available-chatroom a.room-info {
  2485. clear: none; }
  2486. #conversejs #controlbox #chatrooms .bookmarks-list dl.rooms-list.bookmarks dd.available-chatroom a.open-room {
  2487. width: 75%;
  2488. overflow: hidden;
  2489. text-overflow: ellipsis;
  2490. white-space: nowrap;
  2491. padding-right: 0.5em; }
  2492. #conversejs #controlbox #chatrooms .bookmarks-list dl.rooms-list.bookmarks dd.available-chatroom .remove-bookmark {
  2493. float: right; }
  2494. #converse-embedded-chat,
  2495. #conversejs {
  2496. /* Pointer */ }
  2497. #converse-embedded-chat [hidden],
  2498. #conversejs [hidden] {
  2499. display: none; }
  2500. #converse-embedded-chat .visually-hidden,
  2501. #conversejs .visually-hidden {
  2502. position: absolute;
  2503. clip: rect(0, 0, 0, 0); }
  2504. #converse-embedded-chat div.awesomplete,
  2505. #conversejs div.awesomplete {
  2506. display: inline-block;
  2507. position: relative; }
  2508. #converse-embedded-chat div.awesomplete > input,
  2509. #conversejs div.awesomplete > input {
  2510. display: block; }
  2511. #converse-embedded-chat div.awesomplete > ul,
  2512. #conversejs div.awesomplete > ul {
  2513. position: absolute;
  2514. left: 0;
  2515. right: 0;
  2516. z-index: 1;
  2517. min-width: 100%;
  2518. box-sizing: border-box;
  2519. list-style: none;
  2520. padding: 0;
  2521. border-radius: .3em;
  2522. margin: .2em 0 0;
  2523. background: rgba(255, 255, 255, 0.9);
  2524. background: linear-gradient(to bottom right, white, rgba(255, 255, 255, 0.8));
  2525. border: 1px solid rgba(0, 0, 0, 0.3);
  2526. box-shadow: 0.05em 0.2em 0.6em rgba(0, 0, 0, 0.2);
  2527. text-shadow: none; }
  2528. #converse-embedded-chat div.awesomplete > ul[hidden],
  2529. #converse-embedded-chat div.awesomplete > ul:empty,
  2530. #conversejs div.awesomplete > ul[hidden],
  2531. #conversejs div.awesomplete > ul:empty {
  2532. display: none; }
  2533. @supports (transform: scale(0)) {
  2534. #converse-embedded-chat div.awesomplete > ul,
  2535. #conversejs div.awesomplete > ul {
  2536. transition: 0.3s cubic-bezier(0.4, 0.2, 0.5, 1.4);
  2537. transform-origin: 1.43em -.43em; }
  2538. #converse-embedded-chat div.awesomplete > ul[hidden],
  2539. #converse-embedded-chat div.awesomplete > ul:empty,
  2540. #conversejs div.awesomplete > ul[hidden],
  2541. #conversejs div.awesomplete > ul:empty {
  2542. opacity: 0;
  2543. transform: scale(0);
  2544. display: block;
  2545. transition-timing-function: ease; } }
  2546. #converse-embedded-chat div.awesomplete > ul:before,
  2547. #conversejs div.awesomplete > ul:before {
  2548. content: "";
  2549. position: absolute;
  2550. top: -.43em;
  2551. left: 1em;
  2552. width: 0;
  2553. height: 0;
  2554. padding: .4em;
  2555. background: white;
  2556. border: inherit;
  2557. border-right: 0;
  2558. border-bottom: 0;
  2559. -webkit-transform: rotate(45deg);
  2560. transform: rotate(45deg); }
  2561. #converse-embedded-chat div.awesomplete > ul > li,
  2562. #conversejs div.awesomplete > ul > li {
  2563. text-overflow: ellipsis;
  2564. overflow-x: hidden;
  2565. position: relative;
  2566. padding: .2em .5em;
  2567. cursor: pointer; }
  2568. #converse-embedded-chat div.awesomplete > ul > li:hover,
  2569. #conversejs div.awesomplete > ul > li:hover {
  2570. background: #b8d3e0;
  2571. color: black; }
  2572. #converse-embedded-chat div.awesomplete > ul > li[aria-selected="true"],
  2573. #conversejs div.awesomplete > ul > li[aria-selected="true"] {
  2574. background: #3d6d8f;
  2575. color: white; }
  2576. #converse-embedded-chat div.awesomplete mark,
  2577. #conversejs div.awesomplete mark {
  2578. background: #eaff00; }
  2579. #converse-embedded-chat div.awesomplete li:hover mark,
  2580. #conversejs div.awesomplete li:hover mark {
  2581. background: #b5d100; }
  2582. #converse-embedded-chat div.awesomplete li[aria-selected="true"] mark,
  2583. #conversejs div.awesomplete li[aria-selected="true"] mark {
  2584. background: #3d6b00;
  2585. color: inherit; }
  2586. /*# sourceMappingURL=converse.css.map */