diff options
| author | Jules Laplace <jules@okfoc.us> | 2013-02-22 12:06:16 -0800 |
|---|---|---|
| committer | Jules Laplace <jules@okfoc.us> | 2013-02-22 12:06:16 -0800 |
| commit | d1ee2061ffc8a1b311a9c9c0ef1eb4ffde351501 (patch) | |
| tree | eae07a4edf433faacf6402bc819f4b536feaf03d | |
| parent | 6a8ae720310021b13f8aec447482f05641c8f908 (diff) | |
chat css
| -rw-r--r-- | public/css/chat.css | 64 | ||||
| -rw-r--r-- | public/index.html | 14 |
2 files changed, 76 insertions, 2 deletions
diff --git a/public/css/chat.css b/public/css/chat.css new file mode 100644 index 0000000..f2092e0 --- /dev/null +++ b/public/css/chat.css @@ -0,0 +1,64 @@ +#chat_container { + overflow-y: scroll; + overflow-x: hidden; + position: absolute; +} +#chat_container #chat { + font-size: 13px; + line-height: 18px; + padding-left: 10px; + padding-right: 10px; + padding-bottom: 5px; +} +#chat_container #chat p span.you { + color: #ee33bb; +} +#chat_container #chat p span.msg { + display: block; + margin-left: 80px; + word-wrap: break-word; +} +#chat_container #chat img { + max-width: 200px; + max-height: 200px; +} + +#form { + z-index: 3; + position: absolute; +} +#form input { + outline: 0; + border: 1px solid #cccccc; + padding: 2px; + width: 100%; + font-size: 13px; +} +#form #open-emoticons { + position: absolute; + right: -2px; + bottom: 18px; + width: 15px; + height: 15px; + cursor: pointer; +} +#form #emoticons { + display: none; + display: center; + z-index: 100; + position: absolute; + right: -5px; + bottom: 39px; + width: 110px; + padding: 2px 0px 2px 5px; + border: 1px solid #dddddd; + background: white; +} +#form #emoticons img { + margin: 2px; + border: 1px solid transparent; + cursor: pointer; +} +#form #emoticons img:hover { + border: 1px solid black; +}
\ No newline at end of file diff --git a/public/index.html b/public/index.html index 2336d19..61d4685 100644 --- a/public/index.html +++ b/public/index.html @@ -3,6 +3,7 @@ <head> <title>drawdrawdraw</title> <link rel="stylesheet" href="/css/drawdrawdraw.css" type="text/css"> +<link rel="stylesheet" href="/css/chat.css" type="text/css"> <script type="text/javascript" src="/js/zepto.js"></script> <script type="text/javascript" src="/socket.io/socket.io.js"></script> <script type="text/javascript" src="/js/game.js"></script> @@ -10,8 +11,17 @@ </head> <body> + <div id="chat_container"> + <div id="chat"><div id="chat_shim"></div></div> + </div> + <div id="chat_bg"></div> + + <div id="form"> + <input type="text" id="chat-message" maxlength="200"/> + <div id="emoticons"></div> + <img id="open-emoticons" src="/img/emoticons/happy.gif"> + </div> + </body> -<script type="text/javascript"> -</script> </html> |