2023-05-08 11:35:03 -04:00
/* All credits to TheEncrypted777: https://www.reddit.com/r/Oobabooga/comments/12xe6vq/updated_css_styling_with_color_customization_for/ */
. message {
display : grid ;
grid-template-columns : 60px minmax ( 0 , 1fr ) ;
padding-bottom : 28px ;
font-size : 18px ;
2023-09-13 16:29:00 -04:00
font-family : 'Noto Sans' , Arial , sans-serif ;
2023-05-08 11:35:03 -04:00
line-height : 1 . 428571429 ;
}
2023-08-02 11:45:14 -04:00
. circle-you ,
2023-05-08 11:35:03 -04:00
. circle-bot {
background-color : gray ;
border-radius : 1rem ;
border : 2px solid white ;
}
. circle-bot img ,
. circle-you img {
border-radius : 10 % ;
width : 100 % ;
height : 100 % ;
object-fit : cover ;
}
. circle-you , . circle-bot {
2023-10-20 16:02:18 -04:00
/* You can set the size of the profile images here, but if you do, you have to also adjust the .text{padding-left: 90px} to a different number according to the width of the image which is right below here */
2023-05-08 11:35:03 -04:00
width : 135px ;
height : 175px ;
}
. text {
2023-10-20 16:02:18 -04:00
/* Change this to move the message box further left or right depending on the size of your profile pic */
2023-05-08 11:35:03 -04:00
padding-left : 90px ;
2023-10-20 16:02:18 -04:00
text-shadow : 2px 2px 2px rgb ( 0 0 0 / 40 % ) ;
2023-05-08 11:35:03 -04:00
}
. text p {
margin-top : 2px ;
}
. username {
padding-left : 10px ;
font-size : 22px ;
font-weight : bold ;
2023-10-20 16:02:18 -04:00
border-top : 1px solid rgb ( 51 64 90 ) ;
2023-05-08 11:35:03 -04:00
padding : 3px ;
}
. message-body {
position : relative ;
2023-10-20 16:02:18 -04:00
border : 1px solid rgb ( 255 255 255 / 45 . 9 % ) ;
2023-05-08 11:35:03 -04:00
border-radius : 10px ;
padding : 10px ;
padding-top : 5px ;
2023-10-20 16:02:18 -04:00
/* Message gradient background color - remove the line bellow if you don't want a background color or gradient */
2023-05-08 11:35:03 -04:00
background : linear-gradient ( to bottom , # 171730 , # 1b263f ) ;
2023-05-25 12:12:34 -04:00
}
2023-05-08 11:35:03 -04:00
2023-10-20 16:02:18 -04:00
/* Adds 2 extra lines at the top and bottom of the message */
. message-body :: before ,
. message-body :: after {
2023-05-08 11:35:03 -04:00
content : "" ;
position : absolute ;
left : 10px ;
right : 10px ;
height : 1px ;
2023-10-20 16:02:18 -04:00
background-color : rgb ( 255 255 255 / 13 % ) ;
2023-05-25 12:12:34 -04:00
}
2023-10-20 16:02:18 -04:00
. message-body :: before {
2023-05-08 11:35:03 -04:00
top : 6px ;
2023-05-25 12:12:34 -04:00
}
2023-10-20 16:02:18 -04:00
. message-body :: after {
2023-05-08 11:35:03 -04:00
bottom : 6px ;
2023-05-25 12:12:34 -04:00
}
2023-05-08 11:35:03 -04:00
. message-body img {
max-width : 300px ;
max-height : 300px ;
border-radius : 20px ;
}
. message-body p {
margin-bottom : 0 ! important ;
font-size : 18px ! important ;
line-height : 1 . 428571429 ! important ;
2023-10-20 16:02:18 -04:00
color : rgb ( 243 244 246 ) ! important ;
text-shadow : 2px 2px 2px rgb ( 0 0 0 ) ;
2024-07-21 13:45:27 -04:00
font-weight : 500 ;
2023-05-08 11:35:03 -04:00
}
. message-body p em {
2023-10-20 16:02:18 -04:00
color : rgb ( 138 138 138 ) ! important ;
2023-05-08 11:35:03 -04:00
}
2023-08-02 11:45:14 -04:00
2023-10-20 16:02:18 -04:00
@ media screen and ( width < = 688px ) {
2023-08-02 11:45:14 -04:00
. message {
display : grid ;
grid-template-columns : 60px minmax ( 0 , 1fr ) ;
padding-bottom : 25px ;
font-size : 15px ;
2023-09-13 16:29:00 -04:00
font-family : 'Noto Sans' , Helvetica , Arial , sans-serif ;
2023-08-02 11:45:14 -04:00
line-height : 1 . 428571429 ;
}
. circle-you , . circle-bot {
width : 50px ;
height : 73px ;
border-radius : 0 . 5rem ;
}
. circle-bot img ,
. circle-you img {
width : 100 % ;
height : 100 % ;
object-fit : cover ;
}
. text {
2023-10-20 16:02:18 -04:00
padding-left : 0 ;
2023-08-02 11:45:14 -04:00
}
. message-body p {
font-size : 16px ! important ;
}
. username {
font-size : 20px ;
}
}