diff --git a/css/chat_style-messenger.css b/css/chat_style-messenger.css new file mode 100644 index 00000000..4d4bba0d --- /dev/null +++ b/css/chat_style-messenger.css @@ -0,0 +1,124 @@ +.chat { + margin-left: auto; + margin-right: auto; + max-width: 800px; + height: calc(100vh - 306px); + overflow-y: auto; + padding-right: 20px; + display: flex; + flex-direction: column-reverse; + word-break: break-word; + overflow-wrap: anywhere; +} + +.message { + padding-bottom: 25px; + font-size: 15px; + font-family: Helvetica, Arial, sans-serif; + line-height: 1.428571429; +} + +.circle-you { + width: 50px; + height: 50px; + background-color: rgb(238, 78, 59); + border-radius: 50%; +} + +.circle-bot { + width: 50px; + height: 50px; + background-color: rgb(59, 78, 244); + border-radius: 50%; + float: left; + margin-right: 10px; + margin-top: 5px; +} + +.circle-bot img, +.circle-you img { + border-radius: 50%; + width: 100%; + height: 100%; + object-fit: cover; +} +.circle-you { + margin-top: 5px; + float: right; +} +.circle-bot + .text, .circle-you + .text { + border-radius: 18px; + padding: 8px 12px; +} + +.circle-bot + .text { + background-color: #E4E6EB; + float: left; +} + +.circle-you + .text { + float: right; + background-color: rgb(0, 132, 255); + margin-right: 10px; +} + +.circle-you + .text div, .circle-you + .text *, .dark .circle-you + .text div, .dark .circle-you + .text * { + color: #FFF !important; +} +.circle-you + .text .username { + text-align: right; +} + +.dark .circle-bot + .text div, .dark .circle-bot + .text * { + color: #000; +} + +.text { + max-width: 80%; +} + +.text p { + margin-top: 5px; +} + +.username { + font-weight: bold; +} + +.message-body {} + +.message-body img { + max-width: 300px; + max-height: 300px; + border-radius: 20px; +} + +.message-body p { + margin-bottom: 0 !important; + font-size: 15px !important; + line-height: 1.428571429 !important; +} + +.message-body li { + margin-top: 0.5em !important; + margin-bottom: 0.5em !important; +} + +.message-body li > p { + display: inline !important; +} + +.message-body code { + overflow-x: auto; +} +.message-body :not(pre) > code { + white-space: normal !important; +} + +.dark .message-body p em { + color: rgb(138, 138, 138) !important; +} + +.message-body p em { + color: rgb(110, 110, 110) !important; +}