_chatbox.scss 19 KB

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