*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:Arial;
height:100vh;
background:#f4f1ea;
}
/* APP */
#app{
display:flex;
height:100vh;
}
/* SIDEBAR */
#sidebar{
width:220px;
background:#5d4037;
color:#fff;
padding:10px;
overflow:auto;
}
#sidebar h3{
margin-bottom:10px;
}
#userList li{
padding:6px;
border-bottom:1px solid rgba(255,255,255,0.2);
}
/* CHAT */
#chat{
flex:1;
display:flex;
flex-direction:column;
background:#fffaf0;
}
/* RADIO */
#radio{
background:#d4af37;
color:#000;
padding:10px;
text-align:center;
font-weight:bold;
}
/* MENSAJES */
#messages{
flex:1;
padding:10px;
overflow:auto;
}
/* BURBUJAS */
.msg{
margin:6px 0;
padding:10px;
border-radius:10px;
max-width:70%;
}
.me{
background:#d4af37;
color:#000;
margin-left:auto;
}
.other{
background:#e0d7c6;
color:#000;
}
/* SISTEMA */
.system{
text-align:center;
color:#6d4c41;
font-size:12px;
}
/* HORA */
.time{
font-size:10px;
display:block;
}
/* EMOJIS */
#emojis{
padding:8px;
background:#f1e6d6;
text-align:center;
cursor:pointer;
}
/* FORM */
#form{
display:flex;
padding:10px;
background:#e6dccf;
}
#input{
flex:1;
padding:10px;
border:none;
border-radius:5px;
}
button{
padding:10px;
background:#8b5e3c;
border:none;
color:white;
margin-left:5px;
cursor:pointer;
}
button:hover{
background:#6d4c41;
}
/* LOGIN */
#overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
display:flex;
justify-content:center;
align-items:center;
z-index:999;
}
#login-box{
background:#fff;
padding:20px;
border-radius:10px;
text-align:center;
width:250px;
border:2px solid #d4af37;
}
#login-box input{
width:100%;
margin:5px 0;
padding:10px;
}
#login-box button{
width:100%;
padding:10px;
background:#8b5e3c;
color:white;
border:none;
cursor:pointer;
}
/* RESPONSIVE */
@media(max-width:600px){
#sidebar{display:none}
}
..................
*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:Georgia, "Times New Roman", serif;
height:100vh;
background:#f4f1ea;
}
/* APP */
#app{
display:flex;
height:100vh;
}
/* SIDEBAR */
#sidebar{
width:220px;
background:#3e2723;
color:#f5e6c8;
padding:10px;
overflow:auto;
}
#sidebar h3{
margin-bottom:10px;
font-weight:normal;
}
#userList li{
padding:6px;
border-bottom:1px solid rgba(255,255,255,0.1);
}
/* CHAT */
#chat{
flex:1;
display:flex;
flex-direction:column;
background:#fdfaf6;
}
/* RADIO */
#radio{
background:#d4af37;
color:#3e2723;
padding:10px;
text-align:center;
font-weight:bold;
}
/* MENSAJES */
#messages{
flex:1;
padding:15px;
overflow:auto;
}
/* BURBUJAS */
.msg{
margin:8px 0;
padding:10px;
border-radius:10px;
max-width:70%;
font-size:15px;
}
.me{
background:#d4af37;
color:#3e2723;
margin-left:auto;
}
.other{
background:#ece5dc;
color:#3e2723;
}
/* SISTEMA */
.system{
text-align:center;
color:#8d6e63;
font-size:13px;
font-style:italic;
}
/* HORA */
.time{
font-size:10px;
display:block;
margin-top:4px;
opacity:0.6;
}
/* EMOJIS */
#emojis{
padding:8px;
background:#efe6d8;
text-align:center;
cursor:pointer;
}
/* FORM */
#form{
display:flex;
padding:10px;
background:#e6dccf;
}
#input{
flex:1;
padding:10px;
border:1px solid #ccc;
border-radius:5px;
font-family:inherit;
}
button{
padding:10px 15px;
background:#8b5e3c;
border:none;
color:white;
border-radius:5px;
margin-left:5px;
cursor:pointer;
}
button:hover{
background:#6d4c41;
}
/* LOGIN */
#overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(62,39,35,0.7);
display:flex;
justify-content:center;
align-items:center;
z-index:999;
}
#login-box{
background:#fff8e1;
padding:20px;
border-radius:10px;
text-align:center;
width:260px;
border:2px solid #d4af37;
}
#login-box h3{
margin-bottom:10px;
color:#5d4037;
}
#login-box input{
width:100%;
margin:5px 0;
padding:10px;
border:1px solid #ccc;
border-radius:5px;
}
#login-box button{
width:100%;
padding:10px;
background:#8b5e3c;
color:white;
border:none;
border-radius:5px;
cursor:pointer;
}
/* RESPONSIVE */
@media(max-width:600px){
#sidebar{display:none}
}
****************