1.2K views
1.card-container { 2 background-color: #fff; 3 border-radius: 10px; 4 padding: 15px; 5 margin: 20px; 6 display: flex; 7 flex-direction: column; 8 width: 280px; 9} 10 11.card-header { 12 display: flex; 13 align-items: center; 14 padding-bottom: 10px; 15 border-bottom: 1px solid #ccc; 16} 17 18.card-header .img-avatar { 19 width: 50px; 20 height: 50px; 21 border-radius: 50%; 22 margin-right: 20px; 23 background-color: #333; 24} 25 26.card-header .text-chat { 27 color: black; 28 margin: 0; 29 font-size: 20px; 30} 31 32.card-body { 33 flex: 1; 34 overflow-y: auto; 35} 36 37.messages-container { 38 padding: 15px; 39} 40 41.message-box { 42 padding: 10px; 43 margin-bottom: 5px; 44 border-radius: 10px; 45} 46 47.message-box.left { 48 background-color: #f1f1f1; 49 color: black; 50 font-size: 13px; 51 left: 0; 52} 53 54.message-box.right { 55 background-color: #333; 56 color: #fff; 57 font-size: 13px; 58 right: 0; 59} 60 61.message-input { 62 padding: 5px; 63 border-top: 1px solid #ccc; 64} 65 66.message-input .message-send { 67 width: 100%; 68 padding: 10px; 69 border: none; 70 border-radius: 10px; 71 resize: none; 72} 73 74.message-input .button-send { 75 background-color: #333; 76 color: #fff; 77 padding: 10px 20px; 78 border: none; 79 cursor: pointer; 80 margin-left: 10px; 81 border-radius: 10px; 82 font-size: 13px; 83} 84 85.message-input .button-send:hover { 86 background-color: #f1f1f1; 87 color: #333; 88} 89
MIT License