aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--chatserver.html94
-rw-r--r--night.css98
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