#e8e8e8
1.card { 2 width: 260px; 3 background-color: #fff; 4 border: 1px solid #ccc; 5 border-radius: 5px; 6 box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); 7} 8 9.chat-header { 10 background-color: #333; 11 color: #fff; 12 padding: 10px; 13 font-size: 18px; 14 border-top-left-radius: 5px; 15 border-top-right-radius: 5px; 16} 17 18.chat-window { 19 height: 220px; 20 overflow-y: scroll; 21} 22 23.message-list { 24 list-style: none; 25 margin: 0; 26 padding: 0; 27} 28 29.chat-input { 30 display: flex; 31 align-items: center; 32 padding: 10px; 33 border-top: 1px solid #ccc; 34} 35 36.message-input { 37 flex: 1; 38 border: none; 39 outline: none; 40 padding: 5px; 41 font-size: 14px; 42} 43 44.send-button { 45 border: none; 46 outline: none; 47 background-color: #333; 48 color: #fff; 49 font-size: 14px; 50 padding: 5px 10px; 51 cursor: pointer; 52} 53 54.send-button:hover { 55 background-color: rgb(255, 255, 255); 56 color: rgb(0, 0, 0); 57 box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25); 58}
7.2K views
7.2K views
Comments
MIT License