vue-intergrall-plugins 1.1.50 → 1.1.52

package/src/lib-components/Messages/ChatMessages.vue

@@ -167,6 +167,7 @@ import Picker from "../Chat/Picker";
 import { formataTimezoneData } from "../../services/textFormatting";
 import LinkPreview from "./LinkPreview";
 import Clickaway from "@/directives/clickaway";
+import '../../styles/style.css'
 
 export default {
   components: {
@@ -599,485 +600,3 @@ export default {
   },
 };
 </script>
-
-<style>
-:root {
-  --message-color: #373737;
-  --text-color: #fff;
-  --files-bg: rgba(255, 255, 255, 0.1);
-  --files-bg-hover: rgba(255, 255, 255, 0.1);
-
-  --light: 80;
-  --threshold: 60;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.5s;
-}
-
-.fade-enter,
-.fade-leave-to {
-  opacity: 0;
-}
-
-.mensagem-reply {
-  padding: 5px 10px;
-  font-size: 12px;
-  color: #666;
-  transition: background-color 150ms ease-in-out;
-  border-radius: 5px;
-  margin: 5px 0;
-  overflow: hidden;
-  max-width: 100%;
-}
-
-.mensagem-reply p {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.message-reply-principal {
-  border-left: 3px solid transparent;
-  background-color: rgba(100, 100, 100, 0.1);
-}
-
-.message-reply-principal:hover {
-  background-color: rgba(100, 100, 100, 0.2);
-}
-
-.message-reply-outros {
-  background-color: rgb(245, 245, 245);
-  border-left: 3px solid var(--message-color);
-}
-
-.message-reply-outros:hover {
-  background-color: rgb(235, 235, 235);
-}
-
-.mensagem-reply-vazia {
-  display: flex;
-  align-items: center;
-}
-
-.mensagem-reply-vazia svg {
-  margin-right: 5px;
-  color: #ba181b;
-}
-
-.mensagem {
-  padding: 20px 7px 14px 7px;
-  border-radius: 5px;
-  min-width: 150px;
-  min-height: 60px;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-  position: relative;
-  max-width: 80%;
-  margin-bottom: 10px;
-  font-size: 12px;
-  word-break: break-word;
-
-  -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
-    0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-  -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
-    0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
-    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-}
-
-.mensagem.max-w-60 {
-  max-width: 60%;
-}
-
-.mensagem.mapa {
-  width: 100%;
-}
-
-.mensagem.hist-msg {
-  animation: show 1s;
-}
-
-.mensagem a {
-  margin-right: 5px;
-  font-weight: 550;
-  color: inherit;
-  text-decoration: none;
-}
-
-.mensagem a:hover {
-  text-decoration: underline;
-}
-
-.message p {
-  white-space: pre-wrap;
-}
-
-.mensagem-anexo a,
-.mensagem-div-mapa a {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.reply {
-  cursor: pointer;
-  position: absolute;
-  right: 53px;
-  bottom: 5px;
-  font-size: 9.6px;
-  color: #67a332;
-  width: 14.4px;
-  height: 14.4px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  background-color: #fff;
-}
-
-.reply svg {
-  margin-top: -1px;
-  margin-right: -1px;
-}
-
-.reply-with-2-icons {
-  right: 30px;
-}
-
-.check {
-  cursor: pointer;
-  position: absolute;
-  right: 10px;
-  bottom: 2px;
-  font-size: 11.2px;
-}
-
-.check.visualizado,
-.check.visualizado svg {
-  color: #006daa;
-}
-
-.check.verde,
-.check.verde svg {
-  color: #4f772d;
-}
-
-.check.vermelho,
-.check.vermelho svg {
-  color: #ba181b;
-}
-
-.check.cinza,
-.check.cinza svg {
-  color: #999;
-}
-
-.check.preto,
-.check.preto svg {
-  color: #666;
-}
-
-.star {
-  cursor: pointer;
-  position: absolute;
-  right: 30px;
-  bottom: 2px;
-  font-size: 6.4px;
-  width: 11.2px;
-}
-
-.default-stick-size {
-  width: 180px;
-  height: auto;
-}
-
-.horario-envio {
-  margin-right: 15px;
-  font-size: 11.2px;
-  position: absolute;
-  left: 10px;
-  bottom: 2px;
-}
-
-.autor-mensagem {
-  position: absolute;
-  font-size: 9.6px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  max-width: 90%;
-  font-weight: bold;
-  top: 2px;
-}
-
-.menu-primario {
-  transition: opacity 150ms ease-in-out;
-  height: 20px;
-  position: absolute;
-  font-size: 11.2px;
-  top: 2px;
-  display: flex;
-  gap: 5px;
-  padding: 2px 4px;
-}
-
-.menu-primario.principal {
-  left: 2px;
-  color: var(--text-color);
-  background-color: var(--message-color);
-}
-
-.menu-primario.outros {
-  right: 2px;
-  color: var(--text-color);
-  background-color: #fff;
-}
-
-.menu-primario.outros>span:nth-child(1) {
-  order: 10;
-}
-
-.menu-mensagem {
-  cursor: pointer;
-  padding: 1px;
-  opacity: 0.7;
-  transition: opacity 100ms ease-in-out;
-}
-
-.menu-mensagem:hover,
-.menu-mensagem:focus,
-.menu-mensagem:active {
-  opacity: 1;
-}
-
-.menu-flutuante {
-  background-color: #fff;
-  -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
-    0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-  -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
-    0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
-    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-  border-radius: 10px;
-  position: absolute;
-  top: 20px;
-  width: 120px;
-  min-height: 50px;
-  height: 50px;
-  max-height: 50px;
-  overflow-x: hidden;
-  overflow-y: auto;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  z-index: 1;
-}
-
-.menu-flutuante.principal {
-  left: 3px;
-}
-
-.menu-flutuante.outros {
-  right: 3px;
-}
-
-.menu-flutuante li {
-  transition: background-color 300ms ease-in-out;
-  width: 100%;
-  cursor: pointer;
-  padding: 5px 10px;
-  display: flex;
-  align-items: center;
-}
-
-.menu-flutuante li:hover {
-  background-color: #e9e9e9;
-}
-
-/* Principal */
-.mensagem__principal {
-  width: 100%;
-  display: flex;
-  justify-content: flex-end;
-}
-
-.mensagem__principal>.mensagem::after {
-  content: "";
-  width: 0;
-  height: 0;
-  position: absolute;
-  border-left: 10px solid transparent;
-  border-right: 10px solid transparent;
-  border-top: 10px solid var(--message-color);
-  bottom: 5px;
-  right: -10px;
-  transform: rotate(-90deg);
-}
-
-.mensagem__principal>.mensagem {
-  background-color: var(--message-color);
-  color: var(--text-color);
-}
-
-.mensagem__principal>.mensagem .horario-envio {
-  color: var(--text-color);
-}
-
-.mensagem__principal>.mensagem .autor-mensagem {
-  right: 5px;
-  color: var(--text-color);
-}
-
-/* Outros */
-.mensagem__outros {
-  width: 100%;
-  display: flex;
-}
-
-.mensagem__outros>.mensagem {
-  background-color: #fff;
-  color: #333;
-}
-
-.mensagem__outros>.mensagem::after {
-  content: "";
-  width: 0;
-  height: 0;
-  position: absolute;
-  border-left: 10px solid transparent;
-  border-right: 10px solid transparent;
-  border-top: 10px solid #fff;
-  bottom: 5px;
-  left: -10px;
-  transform: rotate(90deg);
-}
-
-/* .mensagem__outros .check{
-          display: none
-        } */
-.mensagem__outros>.autor-mensagem {
-  left: 5px;
-  color: #333;
-}
-
-/* Mapa */
-.mensagem-div-mapa {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  margin-bottom: 5px;
-}
-
-.msg-mapa {
-  width: 100%;
-  min-height: 225px;
-  height: 100%;
-  box-sizing: initial;
-}
-
-.msg-mapa img {
-  max-width: none !important;
-}
-
-.info-mapa {
-  list-style-type: none;
-}
-
-.info-mapa li.title {
-  font-size: 13.6px;
-}
-
-.info-mapa li.address,
-.info-mapa li.url {
-  font-size: 13.6px;
-}
-
-.info-mapa li.url {
-  font-size: 13.6px;
-}
-
-.tooltip-list {
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-}
-
-.emoji-message-container {
-  position: absolute;
-  top: 0;
-  z-index: 1;
-  width: 300px;
-  height: 250px;
-}
-
-/* .emoji-message-container {
-        z-index: 1;
-        overflow: hidden;
-        width: 300px;
-        height: 250px;
-
-        >.sm-emoji-picker {
-          position: relative;
-          width: 300px;
-          height: 250px;
-        }
-      }
-
-      .mensagem .reaction {
-        $size: 28.8px;
-        width: $size;
-        height: $size;
-        min-width: $size;
-        min-height: $size;
-        max-width: $size;
-        max-height: $size;
-      } */
-
-.emoji-message-container .sm-emoji-picker {
-  width: 300px;
-  height: 250px;
-}
-
-.emoji-message-container .sm-emoji-picker .sm-emoji-header {
-  overflow-x: auto;
-  overflow-y: hidden;
-}
-
-.reaction {
-  position: absolute;
-  bottom: 0;
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: rgba(100, 100, 100, 0.4);
-  padding: 5px;
-  font-size: 20.8px;
-  min-width: 28.8px;
-  min-height: 28.8px;
-  max-width: 28.8px;
-  max-height: 28.8px;
-}
-
-.reaction>span {
-  display: block;
-  transform: translateY(-1px);
-}
-
-.mensagem__outros .reaction {
-  right: -30px;
-}
-
-.mensagem__principal .reaction {
-  left: -30px;
-}
-</style>