Skip to content

Instantly share code, notes, and snippets.

@Yankzy

Yankzy/message.css

Created March 22, 2023 07:25
Show Gist options
  • Save Yankzy/dc1bfdade16958116b3b61e35bdac120 to your computer and use it in GitHub Desktop.
Save Yankzy/dc1bfdade16958116b3b61e35bdac120 to your computer and use it in GitHub Desktop.
Download ZIP
CSS for GPTChatty
Raw
message.css
@import url("https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@100;300;400;500;700;800;900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Alegreya Sans", sans-serif;
}
body {
background: #343541;
}
#app {
width: 100vw;
height: 100vh;
background: #343541;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
#chat_container {
flex: 1;
width: 100%;
height: 100%;
overflow-y: scroll;
display: flex;
flex-direction: column;
gap: 10px;
-ms-overflow-style: none;
scrollbar-width: none;
padding-bottom: 20px;
scroll-behavior: smooth;
}
/* hides scrollbar */
#chat_container::-webkit-scrollbar {
display: none;
}
.wrapper {
width: 100%;
padding: 15px;
}
.ai {
background: #40414F;
}
.chat {
width: 100%;
max-width: 1280px;
margin: 0 auto;
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 10px;
}
.profile {
width: 36px;
height: 36px;
border-radius: 5px;
background: #5436DA;
display: flex;
justify-content: center;
align-items: center;
}
.ai .profile {
background: #10a37f;
}
.profile img {
width: 60%;
height: 60%;
object-fit: contain;
}
.message {
flex: 1;
color: #dcdcdc;
font-size: 20px;
max-width: 100%;
overflow-x: scroll;
/*
* white space refers to any spaces, tabs, or newline characters that are used to format the CSS code
* specifies how white space within an element should be handled. It is similar to the "pre" value, which tells the browser to treat all white space as significant and to preserve it exactly as it appears in the source code.
* The pre-wrap value allows the browser to wrap long lines of text onto multiple lines if necessary.
* The default value for the white-space property in CSS is "normal". This tells the browser to collapse multiple white space characters into a single space, and to wrap text onto multiple lines as needed to fit within its container.
*/
white-space: pre-wrap;
-ms-overflow-style: none;
scrollbar-width: none;
}
/* hides scrollbar */
.message::-webkit-scrollbar {
display: none;
}
form {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 10px;
background: #40414F;
display: flex;
flex-direction: row;
gap: 10px;
}
textarea {
width: 100%;
color: #fff;
font-size: 18px;
padding: 10px;
background: transparent;
border-radius: 5px;
border: none;
outline: none;
}
button {
outline: 0;
border: 0;
cursor: pointer;
background: transparent;
}
form img {
width: 30px;
height: 30px;
}
@mixin mobile {
@media screen and (max-width: 480px) {
@content;
}
}
@mixin tablet {
@media screen and (max-width: 768px) {
@content;
}
}
@mixin laptop {
@media screen and (max-width: 1200px) {
@content;
}
}
.formContainer {
background-color: #a7bcff;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
.formWrapper {
background-color: white;
padding: 20px 60px;
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
.logo {
color: #5d5b8d;
font-weight: bold;
font-size: 24px;
}
.title {
color: #5d5b8d;
font-size: 12px;
}
form {
display: flex;
flex-direction: column;
gap: 15px;
input {
padding: 15px;
border: none;
width: 250px;
border-bottom: 1px solid #a7bcff;
&::placeholder {
color: rgb(175, 175, 175);
}
}
button {
background-color: #7b96ec;
color: white;
padding: 10px;
font-weight: bold;
border: none;
cursor: pointer;
}
label {
display: flex;
align-items: center;
gap: 10px;
color: #8da4f1;
font-size: 12px;
cursor: pointer;
img {
width: 32px;
}
}
}
p {
color: #5d5b8d;
font-size: 12px;
margin-top: 10px;
}
}
}
.home {
background-color: #a7bcff;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
.container {
border: 1px solid white;
border-radius: 10px;
width: 65%;
height: 80%;
display: flex;
overflow: hidden;
@include tablet {
width: 90%;
}
.sidebar {
flex: 1;
background-color: #3e3c61;
position: relative;
overflow: scroll;
.navbar {
display: flex;
align-items: center;
background-color: #2f2d52;
height: 50px;
padding: 10px;
justify-content: space-between;
color: #ddddf7;
.logo {
font-weight: bold;
@include tablet {
display: none;
}
}
.user {
display: flex;
gap: 10px;
img {
background-color: #ddddf7;
height: 24px;
width: 24px;
border-radius: 50%;
object-fit: cover;
}
button {
background-color: #5d5b8d;
color: #ddddf7;
font-size: 10px;
border: none;
cursor: pointer;
@include tablet {
position: absolute;
bottom: 10px;
}
}
}
}
.search {
border-bottom: 1px solid gray;
.searchForm {
padding: 10px;
input {
background-color: transparent;
border: none;
color: white;
outline: none;
&::placeholder {
color: lightgray;
}
}
}
}
.userChat {
padding: 10px;
display: flex;
align-items: center;
gap: 10px;
color: white;
cursor: pointer;
&:hover {
background-color: #2f2d52;
}
img {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
}
.userChatInfo {
span {
font-size: 18px;
font-weight: 500;
}
p {
font-size: 14px;
color: lightgray;
}
}
}
}
.chat {
flex: 2;
height: 100%;
.chatInfo {
height: 50px;
background-color: #5d5b8d;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
color: lightgray;
}
.chatIcons {
display: flex;
gap: 10px;
img {
height: 24px;
cursor: pointer;
}
}
.messages {
background-color: #ddddf7;
padding: 10px;
height: calc(100% - 160px);
overflow: scroll;
.message {
display: flex;
gap: 20px;
margin-bottom: 20px;
.messageInfo {
display: flex;
flex-direction: column;
color: gray;
font-weight: 300;
img {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
}
.messageContent {
max-width: 80%;
display: flex;
flex-direction: column;
gap: 10px;
p {
background-color: white;
padding: 10px 20px;
border-radius: 0px 10px 10px 10px;
max-width: max-content;
}
img {
width: 50%;
}
}
&.owner {
flex-direction: row;
.messageContent {
align-items: flex;
p {
background-color: #8da4f1;
color: white;
border-radius: 0px 10px 10px 10px;
}
}
}
}
}
.input {
height: 50px;
background-color: white;
padding: 10px;
display: flex;
align-items: center;
justify-content: space-between;
input {
width: 100%;
border: none;
outline: none;
color: #2f2d52;
font-size: 18px;
&::placeholder {
color: lightgray;
}
}
.send {
display: flex;
align-items: center;
gap: 10px;
img {
height: 24px;
cursor: pointer;
}
button {
border: none;
padding: 10px 15px;
color: white;
background-color: #8da4f1;
cursor: pointer;
border-radius: 5px 5px 5px 5px;
}
}
}
}
}
}
.loading-skeleton {
display: flex;
align-items: center;
}
.wave {
height: 10px;
width: 10px;
margin-right: 4px;
background-color: #d1d1d1;
border-radius: 50%;
display: inline-block;
animation: wave 1s ease-in-out infinite;
}
@keyframes wave {
0% {
transform: scale(1);
}
50% {
transform: scale(0.5);
}
100% {
transform: scale(1);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment