Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/* CHAT STYLES */
* {
font-family: Avenir, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji,
Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
letter-spacing: 0.5px;
}
.ce-chat-list {
background-color: rgb(240, 240, 240) !important;
}
.ce-chats-container {
background-color: rgb(240, 240, 240) !important;
}
.ce-active-chat-card {
background-color: #cabcdc !important;
border: 4px solid #cabcdc !important;
border-radius: 0px !important;
}
.ce-chat-subtitle-text {
color: #595959 !important;
}
.ce-chat-form-container {
padding-bottom: 20px !important;
}
.ce-text-input {
border-radius: 6px !important;
border: 1px solid #3b2a50 !important;
}
.ce-primary-button {
border-radius: 6px !important;
background-color: #7554a0 !important;
position: relative;
bottom: 1px;
}
.ce-danger-button {
background-color: white !important;
border-radius: 22px !important;
}
.ce-settings {
background-color: rgb(240, 240, 240) !important;
}
.ce-autocomplete-input {
border-radius: 6px !important;
border: 1px solid #3b2a50 !important;
}
.ce-autocomplete-options {
border-radius: 6px !important;
border: 1px solid #3b2a50 !important;
background-color: white !important;
}
.ce-chat-settings-container {
padding-top: 12px !important;
}
.ce-chat-avatars-row {
display: none !important;
}
/* CUSTOM FEED */
.chat-feed {
height: 100%;
width: 100%;
overflow: scroll;
background-color: rgb(240, 240, 240);
}
.chat-title-container {
width: calc(100% - 36px);
padding: 18px;
text-align: center;
}
.chat-title {
color: #7554a0;
font-weight: 800;
font-size: 24px;
}
.chat-subtitle {
color: #7554a0;
font-weight: 600;
font-size: 12px;
padding-top: 4px;
}
.message-row {
float: left;
width: 100%;
display: flex;
margin-left: 18px;
}
.message-block {
width: 100%;
display: inline-block;
}
.message-avatar {
width: 44px;
height: 44px;
border-radius: 22px;
color: white;
text-align: center;
background-repeat: no-repeat;
background-position: center;
background-size: 48px;
}
.message {
padding: 12px;
font-size: 16px;
border-radius: 6px;
max-width: 60%;
}
.message-image {
margin-right: 18px;
object-fit: cover;
border-radius: 6px;
height: 30vw;
/* width: 30vw; */
max-height: 200px;
max-width: 200px;
min-height: 100px;
min-width: 100px;
}
.read-receipts {
position: relative;
bottom: 6px;
}
.read-receipt {
width: 13px;
height: 13px;
border-radius: 13px;
margin: 1.5px;
background-repeat: no-repeat;
background-position: center;
background-size: 14px;
}
.message-form-container {
position: absolute;
bottom: 0px;
width: calc(100% - 36px);
padding: 18px;
background-color: rgb(240, 240, 240);
}
.message-form {
overflow: hidden;
border-radius: 6px;
border: 1px solid #3b2a50;
background-color: white;
}
.message-input {
height: 40px;
width: calc(100% - 132px);
background-color: white;
border: 1px solid white;
padding: 0px 18px;
outline: none;
font-size: 15px;
}
.image-button {
cursor: pointer;
padding: 0px 12px;
height: 100%;
}
.send-button {
height: 42px;
background-color: white;
border: 1px solid white;
padding: 0px 18px;
cursor: pointer;
}
.send-icon {
top: 1px;
position: relative;
transform: rotate(-90deg);
}
.picture-icon {
top: 1px;
position: relative;
font-size: 14px;
}
/* FORM STYLES */
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 62,5%;
}
.wrapper {
height: 100vh;
width: 100%;
background: rgb(117,84,160);
background: linear-gradient(90deg, rgba(117,84,160,1) 7%, rgba(117,84,160,1) 17%, rgba(106,95,168,1) 29%, rgba(99,103,174,1) 44%, rgba(87,116,184,1) 66%, rgba(70,135,198,1) 83%, rgba(44,163,219,1) 96%, rgba(22,188,237,1) 100%, rgba(0,212,255,1) 100%);
display: flex;
justify-content: center;
align-items: center;
}
.input {
color: #333;
font-size: 1.2rem;
margin: 0 auto;
padding: 1.5rem 2rem;
border-radius: 0.2rem;
background-color: rgb(255, 255, 255);
border: none;
width: 90%;
display: block;
border-bottom: 0.3rem solid transparent;
transition: all 0.3s;
outline: none;
margin-bottom: 25px;
}
.form {
width: 400px;
}
.title {
text-align: center;
color: white;
margin-bottom: 30px;
width: 100%;
font-size: 2.3em;;
}
.button {
border-radius: 4px;
border: none;
background-color: white;
color: black;
text-align: center;
text-transform: uppercase;
font-size: 22px;
padding: 20px;
width: 200px;
transition: all 0.4s;
cursor: pointer;
margin: 5px;
width: 90%;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.4s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
.error {
color: white;
text-align: center;
margin-top: 20px;
}
@codelabite

This comment has been minimized.

Copy link

@codelabite codelabite commented Feb 14, 2021

wow... awesome, thanks for this work!

@AyyoubAgh

This comment has been minimized.

Copy link

@AyyoubAgh AyyoubAgh commented Feb 15, 2021

absolute mad man

@vinit-churi

This comment has been minimized.

Copy link

@vinit-churi vinit-churi commented Feb 16, 2021

Thanks for the work

@rrrgho

This comment has been minimized.

Copy link

@rrrgho rrrgho commented Feb 19, 2021

Thank you so much for the tutorial you've made on youtube

@Sibajene

This comment has been minimized.

Copy link

@Sibajene Sibajene commented Feb 19, 2021

wow this awasome, God bless..

@dperera121

This comment has been minimized.

Copy link

@dperera121 dperera121 commented Feb 26, 2021

Thank you so much for all info and guidance.

@ZameerBashaMirza

This comment has been minimized.

Copy link

@ZameerBashaMirza ZameerBashaMirza commented Mar 1, 2021

Thank you sir

@tayyebaahmed

This comment has been minimized.

Copy link

@tayyebaahmed tayyebaahmed commented Mar 2, 2021

Thanks Adrian :)

@IttzyTT

This comment has been minimized.

Copy link

@IttzyTT IttzyTT commented Mar 5, 2021

why dis many !importent?? newbie asking

@vinit-churi

This comment has been minimized.

Copy link

@vinit-churi vinit-churi commented Mar 5, 2021

@IttzyTT, many times I too was required to use !important in react external stylesheet. Sometimes the rules don't apply for some reason without !important (even if there is no style in higher hierarchy or priority)

@IttzyTT

This comment has been minimized.

Copy link

@IttzyTT IttzyTT commented Mar 5, 2021

@IttzyTT, many times I too was required to use !important in react external stylesheet. Sometimes the rules don't apply for some reason without !important (even if there is no style in higher hierarchy or priority)

thank you for asnwer, im still in school and learning all the time :D

@RaveenP-glitch

This comment has been minimized.

Copy link

@RaveenP-glitch RaveenP-glitch commented Mar 8, 2021

Thanks for the great work!

@Binho1908

This comment has been minimized.

Copy link

@Binho1908 Binho1908 commented Mar 13, 2021

thanks brow.

@ukaemma2

This comment has been minimized.

Copy link

@ukaemma2 ukaemma2 commented Mar 25, 2021

thank you buddy god bless

@Khusnijafar

This comment has been minimized.

Copy link

@Khusnijafar Khusnijafar commented Mar 26, 2021

That's awesome, thanks Adrian.

@code08-ind

This comment has been minimized.

Copy link

@code08-ind code08-ind commented Mar 26, 2021

Thanks

@horzu

This comment has been minimized.

Copy link

@horzu horzu commented Mar 30, 2021

You are the best!

@Sibajene

This comment has been minimized.

Copy link

@Sibajene Sibajene commented Apr 4, 2021

@victor-cody

This comment has been minimized.

Copy link

@victor-cody victor-cody commented May 3, 2021

This is amazing 😍, you just helped me complete a coding challenge. thanks so much

@zipperdev

This comment has been minimized.

Copy link

@zipperdev zipperdev commented May 13, 2021

Thank you!

@cystudyeverday

This comment has been minimized.

Copy link

@cystudyeverday cystudyeverday commented May 14, 2021

Thanks!!!

@tahmid-ul

This comment has been minimized.

Copy link

@tahmid-ul tahmid-ul commented May 16, 2021

Thank you so much mate! You are amazing.

@Animishka

This comment has been minimized.

Copy link

@Animishka Animishka commented May 23, 2021

You are SUPERMAN!

@Prono96

This comment has been minimized.

Copy link

@Prono96 Prono96 commented Jul 26, 2021

You doing well man.
welldone : )

@iAmitRoshan

This comment has been minimized.

Copy link

@iAmitRoshan iAmitRoshan commented Jul 27, 2021

Big thanks Bro

@s2curitydev

This comment has been minimized.

Copy link

@s2curitydev s2curitydev commented Aug 16, 2021

THANKS!!!

@shekugimi

This comment has been minimized.

Copy link

@shekugimi shekugimi commented Oct 7, 2021

Thanks

@caleblipan

This comment has been minimized.

Copy link

@caleblipan caleblipan commented Oct 11, 2021

Hvala!

@Bezel-Joseph

This comment has been minimized.

Copy link

@Bezel-Joseph Bezel-Joseph commented Oct 17, 2021

Great Work!!

@AdaoBJr

This comment has been minimized.

Copy link

@AdaoBJr AdaoBJr commented Oct 18, 2021

Great Work!!!
Thanks so much!!!

@Ekwugha

This comment has been minimized.

Copy link

@Ekwugha Ekwugha commented Nov 17, 2021

Thanks so much!!!....can't stress this enough

@jhvonsky

This comment has been minimized.

Copy link

@jhvonsky jhvonsky commented Nov 22, 2021

Appreciate that, thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment