_chatbox.scss 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662
  1. #conversejs {
  2. .flyout {
  3. border-radius: $chatbox-border-radius;
  4. position: absolute;
  5. @media screen and (max-height: $mobile-landscape-height) {
  6. border-radius: 0;
  7. }
  8. @media screen and (max-width: $mobile-portrait-length) {
  9. border-radius: 0;
  10. }
  11. @media screen and (max-height: $mobile-landscape-height) {
  12. bottom: 0;
  13. }
  14. @media screen and (max-width: $mobile-portrait-length) {
  15. bottom: 0;
  16. }
  17. }
  18. .chatbox-btn {
  19. border-radius: 25%;
  20. border: none;
  21. cursor: pointer;
  22. font-size: $chatbox-button-size;
  23. margin: 0 0.2em;
  24. padding: 0 0 0 0.5em;
  25. text-decoration: none;
  26. &:active {
  27. position: relative;
  28. top: 1px;
  29. }
  30. }
  31. .chat-head {
  32. flex-wrap: nowrap;
  33. color: #ffffff;
  34. font-size: 100%;
  35. margin: 0;
  36. padding: 0.5em;
  37. position: relative;
  38. &.chat-head-chatbox {
  39. background-color: $chat-head-color;
  40. }
  41. .avatar {
  42. height: 36px;
  43. width: 36px;
  44. margin-right: 0.5em;
  45. }
  46. .chatbox-buttons {
  47. flex-direction: row-reverse;
  48. @include make-col-ready();
  49. @include make-col(4);
  50. padding: 0;
  51. }
  52. .user-custom-message {
  53. color: white;
  54. font-size: 75%;
  55. font-style: italic;
  56. overflow: hidden;
  57. text-overflow: ellipsis;
  58. white-space: nowrap;
  59. margin: 0;
  60. padding-top: 0.2em;
  61. }
  62. a, a:visited, a:hover, a:not([href]):not([tabindex]) {
  63. &.chatbox-btn {
  64. &.fa {
  65. color: white;
  66. &.button-on:before {
  67. padding: 0.2em;
  68. background-color: $chat-head-text-color;
  69. color: $chat-head-color;
  70. }
  71. }
  72. }
  73. }
  74. .chatbox-btn {
  75. color: white;
  76. &.fa {
  77. color: white;
  78. }
  79. &:active {
  80. position: relative;
  81. top: 1px;
  82. }
  83. &.button-on:before {
  84. border-radius: 5%;
  85. background-color: $chat-head-text-color;
  86. color: $chat-head-color;
  87. }
  88. }
  89. }
  90. .chatbox {
  91. text-align: left;
  92. margin: 0 $chat-gutter;
  93. @media screen and (max-height: $mobile-landscape-height) {
  94. margin: 0;
  95. width: $mobile-chat-width;
  96. }
  97. @media screen and (max-width: $mobile-portrait-length) {
  98. margin: 0;
  99. width: $mobile-chat-width;
  100. }
  101. .box-flyout {
  102. display: flex;
  103. flex-direction: column;
  104. justify-content: space-between;
  105. background-color: $chat-head-color;
  106. box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
  107. z-index: 1;
  108. overflow-y: scroll;
  109. width: 100%;
  110. @media screen and (max-height: $mobile-landscape-height) {
  111. height: $mobile-chat-height;
  112. width: $mobile-chat-width;
  113. height: 100vh;
  114. }
  115. @media screen and (max-width: $mobile-portrait-length) {
  116. height: $mobile-chat-height;
  117. width: $mobile-chat-width;
  118. height: 100vh;
  119. }
  120. }
  121. .chat-title {
  122. font-family: $heading-font;
  123. color: white;
  124. display: block;
  125. line-height: $line-height-large;
  126. overflow: hidden;
  127. text-overflow: ellipsis;
  128. white-space: nowrap;
  129. a {
  130. color: $chat-head-text-color;
  131. width: 100%;
  132. }
  133. }
  134. .chat-body {
  135. display: flex;
  136. flex-direction: column;
  137. justify-content: space-between;
  138. height: 100%;
  139. background-color: $chat-head-color;
  140. border-bottom-left-radius: $chatbox-border-radius;
  141. border-bottom-right-radius: $chatbox-border-radius;
  142. @media screen and (max-height: $mobile-landscape-height) {
  143. border-bottom-left-radius: 0;
  144. border-bottom-right-radius: 0;
  145. }
  146. @media screen and (max-width: $mobile-portrait-length) {
  147. border-bottom-left-radius: 0;
  148. border-bottom-right-radius: 0;
  149. }
  150. border-top: 0;
  151. p {
  152. color: $text-color;
  153. font-size: $message-font-size;
  154. margin: 0;
  155. padding: 5px;
  156. }
  157. }
  158. .new-msgs-indicator {
  159. position: relative;
  160. width: 100%;
  161. cursor: pointer;
  162. background-color: $chat-head-color;
  163. color: $light-background-color;
  164. padding: 0.5em;
  165. font-size: 0.9em;
  166. text-align: center;
  167. z-index: 20;
  168. white-space: nowrap;
  169. margin-bottom: 0.25em;
  170. }
  171. .chat-content {
  172. height: 100%;
  173. font-size: $message-font-size;
  174. color: $text-color;
  175. overflow-y: auto;
  176. border: 0;
  177. background-color: #ffffff;
  178. line-height: 1.3em;
  179. video {
  180. width: 100%
  181. }
  182. progress {
  183. margin: 0.5em 0;
  184. width: 100%
  185. }
  186. }
  187. .chat-content-sendbutton {
  188. height: calc(100% - #{$chat-textarea-height + $send-button-height + 2*$send-button-margin});
  189. }
  190. .dropdown { /* status dropdown styles */
  191. background-color: $light-background-color;
  192. dd {
  193. margin: 0;
  194. padding: 0;
  195. position: relative;
  196. }
  197. }
  198. .sendXMPPMessage {
  199. -moz-background-clip: padding;
  200. -webkit-background-clip: padding-box;
  201. @include border-bottom-radius($chatbox-border-radius);
  202. background-clip: padding-box;
  203. background-color: white;
  204. border: 0;
  205. margin: 0;
  206. padding: 0;
  207. @media screen and (max-height: $mobile-landscape-height) {
  208. width: 100%;
  209. }
  210. @media screen and (max-width: $mobile-portrait-length) {
  211. width: 100%;
  212. }
  213. .spoiler-hint {
  214. width: 100%;
  215. }
  216. .chat-textarea {
  217. border-top-left-radius: 0;
  218. border-top-right-radius: 0;
  219. @include border-bottom-radius($chatbox-border-radius);
  220. padding: 0.5em;
  221. width: 100%;
  222. border: none;
  223. min-height: $chat-textarea-height;
  224. margin-bottom: -4px; // Not clear why this is necessar :(
  225. &.spoiler {
  226. height: 42px;
  227. }
  228. }
  229. .send-button {
  230. position: absolute;
  231. left: $send-button-margin;
  232. @include calc(width, '100% - #{2*$send-button-margin}');
  233. background-color: $chat-head-color;
  234. color: $inverse-link-color;
  235. font-size: 80%;
  236. height: $send-button-height;
  237. bottom: -$send-button-height - $send-button-margin;
  238. }
  239. .chat-toolbar {
  240. box-sizing: border-box;
  241. margin: 0;
  242. padding: 0.25em;
  243. display: block;
  244. border-top: 8px solid $chat-head-color;
  245. background-color: white;
  246. color: $chat-head-color;
  247. .fa, .fa:hover {
  248. color: $chat-head-color;
  249. font-size: $font-size-large;
  250. }
  251. .unencrypted a,
  252. .unencrypted {
  253. color: $text-color;
  254. .toolbar-menu {
  255. a {
  256. color: $link-color;
  257. }
  258. }
  259. }
  260. .unverified a,
  261. .unverified {
  262. color: #cf5300;
  263. }
  264. .private a,
  265. .private {
  266. color: #4b7003;
  267. }
  268. .toggle-occupants {
  269. float: right;
  270. }
  271. li {
  272. cursor: pointer;
  273. display: inline-block;
  274. list-style: none;
  275. padding: 0 0.5em;
  276. &:hover {
  277. cursor: pointer;
  278. }
  279. .toolbar-menu {
  280. background-color: #fff;
  281. bottom: 2rem;
  282. box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
  283. margin-bottom: 0;
  284. min-width: 20rem;
  285. position: absolute;
  286. right: 0;
  287. top: auto;
  288. z-index: $zindex-dropdown;
  289. &.otr-menu {
  290. left: -6em;
  291. min-width: 15rem;
  292. &.show {
  293. display: flex;
  294. flex-direction: column;
  295. }
  296. }
  297. a {
  298. color: $link-color;
  299. }
  300. ul {
  301. &.emoji-picker {
  302. overflow: scroll;
  303. padding: 0.5em;
  304. }
  305. li {
  306. margin-left: 0;
  307. cursor: pointer;
  308. list-style: none;
  309. position: relative;
  310. &.emoji-skintone {
  311. }
  312. &.insert-emoji {
  313. padding: 0.2em;
  314. &.picked {
  315. background-color: $highlight-color;
  316. }
  317. &:hover {
  318. background-color: $highlight-color;
  319. }
  320. a {
  321. font-size: $font-size-huge;
  322. &:hover {
  323. color: #8f2831;
  324. }
  325. }
  326. }
  327. }
  328. }
  329. }
  330. &.toggle-smiley {
  331. a.toggle-smiley {
  332. padding: 0;
  333. }
  334. .emoji-toolbar {
  335. box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.4);
  336. .emoji-category-picker {
  337. padding-top: 0.5em;
  338. ul {
  339. display: flex;
  340. flex-direction: row;
  341. justify-content: space-between;
  342. }
  343. }
  344. .emoji-category-picker,
  345. .emoji-skintone-picker {
  346. li {
  347. padding: 0.2em;
  348. font-size: $font-size-huge;
  349. &:hover {
  350. background-color: $highlight-color;
  351. }
  352. }
  353. }
  354. }
  355. }
  356. &.toggle-otr {
  357. ul {
  358. z-index: 99;
  359. li {
  360. &:hover {
  361. background-color: $highlight-color;
  362. }
  363. display: block;
  364. padding: 7px;
  365. a {
  366. display: block;
  367. }
  368. }
  369. }
  370. }
  371. }
  372. }
  373. }
  374. .dragresize {
  375. background: transparent;
  376. border: 0;
  377. margin: 0;
  378. position: absolute;
  379. top: 0;
  380. z-index: 20;
  381. &-top {
  382. cursor: n-resize;
  383. height: 5px;
  384. width: 100%;
  385. }
  386. &-left {
  387. cursor: w-resize;
  388. width: 5px;
  389. height: 100%;
  390. left: 0;
  391. }
  392. &-topleft {
  393. cursor: nw-resize;
  394. width: 15px;
  395. height: 15px;
  396. top: 0;
  397. left: 0;
  398. }
  399. }
  400. }
  401. }
  402. /* ******************* Overlay and embedded styles *************************** */
  403. #conversejs.converse-embedded,
  404. #conversejs.converse-overlayed {
  405. .chat-head {
  406. border-top-left-radius: $chatbox-border-radius;
  407. border-top-right-radius: $chatbox-border-radius;
  408. @media screen and (max-height: $mobile-landscape-height) {
  409. border-top-left-radius: 0;
  410. border-top-right-radius: 0;
  411. }
  412. @media screen and (max-width: $mobile-portrait-length) {
  413. border-top-left-radius: 0;
  414. border-top-right-radius: 0;
  415. }
  416. }
  417. .chatbox {
  418. min-width: $overlayed-chat-width!important;
  419. width: $overlayed-chat-width;
  420. .box-flyout {
  421. min-width: $overlayed-chat-width!important;
  422. width: $overlayed-chat-width;
  423. }
  424. .chat-body {
  425. .chat-message {
  426. line-height: $line-height-large;
  427. .chat-msg-author {
  428. line-height: $line-height-large;
  429. }
  430. .chat-msg-content {
  431. line-height: $line-height-large;
  432. .emojione {
  433. margin-bottom: -5px;
  434. }
  435. }
  436. }
  437. }
  438. }
  439. .chatbox {
  440. form.sendXMPPMessage {
  441. .chat-toolbar {
  442. li {
  443. .toolbar-menu {
  444. min-width: 235px;
  445. ul {
  446. &.emoji-toolbar {
  447. width: 100%;
  448. .emoji-category {
  449. float: left;
  450. }
  451. }
  452. }
  453. }
  454. }
  455. }
  456. }
  457. }
  458. }
  459. #conversejs.converse-overlayed {
  460. .flyout {
  461. bottom: $overlayed-chatbox-hover-height;
  462. }
  463. .box-flyout {
  464. height: $overlayed-chat-height;
  465. min-height: $overlayed-chat-height/2;
  466. }
  467. .chat-head {
  468. height: $overlayed-chat-head-height;
  469. }
  470. .chat-textarea {
  471. max-height: $overlayed-max-chat-textarea-height;
  472. }
  473. .emoji-picker {
  474. height: $overlayed-emoji-picker-height;
  475. }
  476. }
  477. @include media-breakpoint-down(sm) {
  478. #conversejs.converse-overlayed {
  479. > .row {
  480. flex-direction: column;
  481. &.no-gutters {
  482. margin: -1em;
  483. }
  484. }
  485. }
  486. }
  487. /* ******************* Fullpage styles *************************** */
  488. #conversejs.converse-fullscreen {
  489. .flyout {
  490. border-radius: 0;
  491. border-top: 0.8em solid $chat-head-color;
  492. border: $flyout-padding solid $chat-head-color;
  493. bottom: 0;
  494. }
  495. .chatbox-btn {
  496. font-size: $fullpage-chatbox-button-size;
  497. margin: 0 0.3em;
  498. }
  499. .chat-head {
  500. height: $fullpage-chat-head-height;
  501. .chatbox-buttons {
  502. @include make-col(3);
  503. }
  504. font-size: $font-size-huge;
  505. padding: 0;
  506. .user-custom-message {
  507. font-size: 50%;
  508. height: auto;
  509. line-height: $line-height;
  510. }
  511. }
  512. .chat-textarea {
  513. max-height: $fullpage-max-chat-textarea-height;
  514. }
  515. .emoji-picker {
  516. height: $fullpage-emoji-picker-height;
  517. }
  518. .chatbox {
  519. width: 100%;
  520. height: 100%;
  521. margin: 0;
  522. @include make-col-ready();
  523. @include media-breakpoint-up(md) {
  524. @include make-col(9);
  525. }
  526. @include media-breakpoint-up(xl) {
  527. @include make-col(10);
  528. }
  529. .box-flyout {
  530. background-color: $chat-head-color;
  531. box-shadow: none;
  532. height: $fullpage-chat-height;
  533. min-height: $fullpage-chat-height/2;
  534. width: $fullpage-chat-width;
  535. }
  536. .chat-body {
  537. background-color: $chat-head-color;
  538. border-top-left-radius: $chatbox-border-radius;
  539. border-top-right-radius: $chatbox-border-radius;
  540. .chat-message {
  541. line-height: $line-height;
  542. font-size: $font-size-small;
  543. .chat-msg-author {
  544. line-height: $line-height;
  545. }
  546. .chat-msg-content {
  547. line-height: $line-height;
  548. .emojione {
  549. height: $line-height;
  550. margin-bottom: -$line-height/4;
  551. }
  552. }
  553. }
  554. }
  555. .chat-content {
  556. border-top-left-radius: $chatbox-border-radius;
  557. border-top-right-radius: $chatbox-border-radius;
  558. }
  559. .chat-title {
  560. font-size: $font-size-huge;
  561. line-height: $line-height-huge;
  562. }
  563. .sendXMPPMessage {
  564. ul {
  565. width: 100%;
  566. }
  567. .toggle-smiley {
  568. ul {
  569. &.emoji-toolbar {
  570. .emoji-category-picker {
  571. margin-right: 5em;
  572. }
  573. .emoji-category {
  574. padding-left: 10px;
  575. padding-right: 10px;
  576. }
  577. }
  578. }
  579. }
  580. }
  581. }
  582. }
  583. @media screen and (max-width: 767px) {
  584. #conversejs:not(.converse-embedded) {
  585. > .row {
  586. flex-direction: row-reverse;
  587. }
  588. #converse-login-panel {
  589. .converse-form {
  590. padding: 3em 2em 3em;
  591. }
  592. }
  593. .sidebar {
  594. display: block;
  595. }
  596. .chatbox {
  597. width: calc(100% - 50px);
  598. .row {
  599. .box-flyout {
  600. left: 50px;
  601. bottom: 0;
  602. height: 100vh;
  603. box-shadow: none;
  604. }
  605. }
  606. }
  607. }
  608. }
  609. @media screen and (max-width: 767px) {
  610. #conversejs:not(.converse-embedded).converse-fullscreen {
  611. .chatbox {
  612. width: calc(100% - 50px);
  613. }
  614. }
  615. }