diff options
| -rw-r--r-- | chatserver.html | 94 | ||||
| -rw-r--r-- | night.css | 98 |
2 files changed, 100 insertions, 92 deletions
diff --git a/chatserver.html b/chatserver.html index 073ae2d..f27d303 100644 --- a/chatserver.html +++ b/chatserver.html @@ -3,6 +3,7 @@ <head> <meta charset="utf-8"> <title>Chatserver</title> +<link rel="stylesheet" href="night.css"> <script> var ws,nick; ws=new WebSocket("ws://"+location.hostname+":8000"); @@ -73,7 +74,7 @@ function addMessageLine(from,msg,isHistory){ td2=document.createElement("td"); td2.appendChild(document.createTextNode(from=="--"||from=="*"?from:"<"+from+">")); - if(from==nick)td.style.color="#00f"; + if(from==nick)td.classList.add("message-ownmessage"); tr2.appendChild(td2); td2=document.createElement("td"); @@ -102,97 +103,6 @@ function changeNickPrompt(){ if(newnick!=null)ws.send("#nick "+newnick.replace(/[\x00-\x20\x7F]/g,"")); } </script> -<style> -html{height:calc(100% - 8px);} -body{ - height:calc(100% - 8px); - margin:8px; -} -table#maintable, -table#maintable > tbody, -table#maintable > tbody > tr{ - width:800px; - height:100%; - display:block; - margin:0; - padding:0; -} -td#lobbylist, -td#lobbylog{ - display:inline-block; - height:calc(100% - 8px); - border:1px #ccc solid; - border-radius:10px; - padding:0; - font-family:Monaco,"Courier New",Monospace; -} -td#lobbylist{width:120px;} -td#lobbylog{ - width:672px; - word-wrap:break-word; -} -div#lobbylistdiv{ - width:100%; - height:calc(100% - 30px); -} -div#lobbylistdiv > div{ - cursor:pointer; -} -div#lobbylistdiv > div.selected{ - color:#00a; - background-color:#eef; -} -td#lobbylog > div, -tbody#lobbtlobtb{ - overflow:scroll; -} -tbody#lobbylogtb, -tbody#lobbylogtb > tr{ - width:100%; -} -td#lobbylog > div{ - height:calc(100% - 22px); -} -tbody#lobbylogtb td{ - padding:0; -} -td#lobbylog table{ - border-collapse:collapse; -} -tbody#lobbylogtb > tr > td > table > tbody > tr > td:first-child{ - display:inline-block; - padding-right:6px; - width:100px; - text-align:right; - margin-bottom:5px; -} -tbody#lobbylogtb > tr > td > table > tbody > tr > td:last-child{ - /*display:inline-block;*/ - padding-left:6px; - width:calc(100% - 100px); - max-width:calc(100% - 100px); - margin-bottom:5px; - word-wrap:break-word; - border-left:1px #eee solid; -} -div#nickbtn{ - display:inline-block; - background-color:#bbb; - border:1px #ddd solid; - border-radius:5px; - font-size:12px; - cursor:pointer; -} - -.textinput{ - bottom:0; - width:664px; - height:15px; - border:none; - border-top:1px #aaa solid; - font-size:14px; -} -</style> </head> <body> <table id="maintable"><tbody><tr> diff --git a/night.css b/night.css new file mode 100644 index 0000000..0541527 --- /dev/null +++ b/night.css @@ -0,0 +1,98 @@ +html{height:calc(100% - 8px);} +body{ + height:calc(100% - 8px); + margin:8px; + color:#fff; + background-color:#112; +} +table#maintable, +table#maintable > tbody, +table#maintable > tbody > tr{ + width:800px; + height:100%; + display:block; + margin:0; + padding:0; +} +td#lobbylist, +td#lobbylog{ + display:inline-block; + height:calc(100% - 8px); + border:1px #ccc solid; + border-radius:10px; + padding:0; + font-family:Monaco,"Courier New",Monospace; +} +td#lobbylist{width:120px;} +td#lobbylog{ + width:672px; + word-wrap:break-word; +} +div#lobbylistdiv{ + width:100%; + height:calc(100% - 30px); +} +div#lobbylistdiv > div{ + cursor:pointer; +} +div#lobbylistdiv > div.selected{ + color:#00a; + background-color:#eef; +} +td#lobbylog > div, +tbody#lobbtlobtb{ + overflow:scroll; +} +tbody#lobbylogtb, +tbody#lobbylogtb > tr{ + width:100%; +} +td#lobbylog > div{ + height:calc(100% - 22px); +} +tbody#lobbylogtb td{ + padding:0; +} +tbody#lobbylogtb td.message-ownmessage{ + color:#2d4; +} +td#lobbylog table{ + border-collapse:collapse; +} +tbody#lobbylogtb > tr > td > table > tbody > tr > td:first-child{ + display:inline-block; + padding-right:6px; + width:100px; + text-align:right; + margin-bottom:5px; +} +tbody#lobbylogtb > tr > td > table > tbody > tr > td:last-child{ + /*display:inline-block;*/ + padding-left:6px; + width:calc(100% - 100px); + max-width:calc(100% - 100px); + margin-bottom:5px; + word-wrap:break-word; + border-left:1px #eee solid; +} +div#nickbtn{ + display:inline-block; + background-color:#333; + border:1px #555 solid; + color:#ddd; + border-radius:5px; + font-size:12px; + cursor:pointer; +} + +.textinput{ + font-family:Monaco,"Courier New",Monospace; + bottom:0; + width:664px; + height:15px; + border:none; + border-top:1px #aaa solid; + font-size:14px; + background-color:#001; + color:#bbb; +}
\ No newline at end of file |