최시원 / Singer-Composer

Go to a project
Toggle navigation Toggle navigation pinning
devsho
6d75935f 1 parent ad08ca2a

채팅 줄바꿈과 색상변경

Inline Side-by-side
Showing 1 changed file with 13 additions and 11 deletions
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
3 margin: auto; 3 margin: auto;
4 margin-top: 100px; 4 margin-top: 100px;
5 border-radius: 20px; 5 border-radius: 20px;
6 - background-color: lightblue; 6 + background-color: #B2C7D9;
7 text-align: center; 7 text-align: center;
8 width: 500px; 8 width: 500px;
9 height: 800px; 9 height: 800px;
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
13 #chat { 13 #chat {
14 height: 90%; 14 height: 90%;
15 width: 100%; 15 width: 100%;
16 + padding-top: 10px;
16 overflow-y: auto; 17 overflow-y: auto;
17 -ms-overflow-style: none; /* IE and Edge */ 18 -ms-overflow-style: none; /* IE and Edge */
18 scrollbar-width: none; /* Firefox */ 19 scrollbar-width: none; /* Firefox */
...@@ -27,8 +28,8 @@ ...@@ -27,8 +28,8 @@
27 width: 90%; 28 width: 90%;
28 margin-left: 5%; 29 margin-left: 5%;
29 margin-right: 5%; 30 margin-right: 5%;
30 - margin-top: 10px; 31 + margin-bottom: 10px;
31 - background-color: aquamarine; 32 + background-color: #A9BDCE;
32 text-align: center; 33 text-align: center;
33 clear:both; 34 clear:both;
34 float:center; 35 float:center;
...@@ -39,8 +40,8 @@ ...@@ -39,8 +40,8 @@
39 width: 90%; 40 width: 90%;
40 margin-left: 5%; 41 margin-left: 5%;
41 margin-right: 5%; 42 margin-right: 5%;
42 - margin-top: 10px; 43 + margin-bottom: 10px;
43 - background-color: indianred; 44 + background-color: #A9BDCE;
44 text-align: center; 45 text-align: center;
45 clear:both; 46 clear:both;
46 float:center; 47 float:center;
...@@ -48,24 +49,25 @@ ...@@ -48,24 +49,25 @@
48 49
49 /* 내가 보낸 메시지 */ 50 /* 내가 보낸 메시지 */
50 .me { 51 .me {
51 - background-color: lemonchiffon; 52 + background-color: #FFEB33;
52 border-radius: 5px; 53 border-radius: 5px;
53 - margin-top: 10px; 54 + margin-bottom: 10px;
54 - margin-left: 5%; 55 + margin-left: 30%;
55 margin-right: 5%; 56 margin-right: 5%;
56 padding: 3px; 57 padding: 3px;
57 text-align: right; 58 text-align: right;
58 clear:both; 59 clear:both;
59 float:right; 60 float:right;
61 + word-break: break-all
60 } 62 }
61 63
62 /* 상대방이 보낸 메시지 */ 64 /* 상대방이 보낸 메시지 */
63 .other { 65 .other {
64 - background-color: white; 66 + background-color:#FFFFFF;
65 border-radius: 5px; 67 border-radius: 5px;
66 - margin-top: 10px; 68 + margin-bottom: 10px;
67 margin-left: 5%; 69 margin-left: 5%;
68 - margin-right: 5%; 70 + margin-right: 30%;
69 padding: 3px; 71 padding: 3px;
70 text-align: left; 72 text-align: left;
71 clear:both; 73 clear:both;
......