style.css
/*==============================
GENERAL STYLES
================================*/
/*https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/*/
*, html {
box-sizing: border-box;
margin:0;
padding:0;
}
*:before, *:after {
box-sizing: inherit;
}
body {
font: 1.5em Helvetica, Arial;
height: 100%;
padding-bottom: 2.3em;
overflow:auto;
}
/*==============================
#MESSAGE-INPUT-FORM
================================*/
form {
background: #2c3e50;
height: 2.3em;
width: 100%;
display: flex;
padding: 3px;
position: fixed;
bottom: 0;
margin: 0;
}
form input {
border: 0;
font-size: 1em;
/*height: 2px;*/
height: 2em;
min-width: 70%;
flex: 1;
padding:0.5em;
margin-right: .5%;
}
form button {
background: #27ae60;
border: none;
color: white;
font-size: 1em;
height: 2em;
padding: 10px;
}
/*==============================
#JOINING-CHAT-STRAPLINE
================================*/
#joiners {
background-color:#2c3e50;
color: white;
opacity:0.9;
z-index: 3;
font-size: 1em;
text-align: center;
padding: 0.5em;
word-wrap: break-word;
}
#joined { color: #40d47e; }
/*==============================
#MESSAGES-WINDOW
================================*/
#messages {
list-style-type: none;
margin: 0;
max-height: 90%;
padding: 0;
}
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
/* == Individual messages == */
.time { color: #9c9c9c; }
.name {
color: #2980b9;
margin-right: 0.8em;
word-wrap: break-word;
}
.name,
.time {
font-size: 0.7em;
}
/*==============================
MEDIA QUERIES
================================*/
@media only screen and (min-width: 768px) {
.name {
font-size: 1em;
}
.name,
.time {
font-size: .8em;
}
#joiners {
height: 2em;
font-size: 1.5em;
padding: 0.5em 0 1em 2em;
text-align: left;
}
}