Skip to content
Browse files

Cleaned up CSS

  • Loading branch information...
1 parent 494eacc commit 21c6cdd5e661d6c2667e56161d3c73c8db7f8da5 @dcneiner dcneiner committed Apr 11, 2010
Showing with 176 additions and 163 deletions.
  1. +0 −5 demo/client.js
  2. +176 −158 demo/css/layout.css
View
5 demo/client.js
@@ -1,10 +1,5 @@
(function($) {
-// window.setTimeout(function(){
-// $("#nick").val("Doug Neiner");
-// $("#login").submit();
-// }, 1000);
-
var colors = ["green","orange","yellow","red","fuschia","blue"],
channel = nodeChat.connect("/chat"),
scroll = true,
View
334 demo/css/layout.css
@@ -9,21 +9,159 @@ html, body {
height: 100%;
}
+/* Fonts */
+
+/* Normal type */
+body, #users li, #entry input[type=text], a#submit, #chat-log {
+ font-family: Helvetica, Arial, sans-serif;
+}
+
+/* Specia Type */
+footer p.credits, #login h1 {
+ font-family: "Gill Sans", "Gill Sans MT", Helvetica, Arial, sans-serif;
+}
+
+/** HEADER */
+
+body > header {
+ background: #000 url(../images/header-bg.png) repeat-x;
+
+ -webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0;
+ -moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0;
+ box-shadow: rgba(255,255,255,0.1) 0 1px 0;
+ position: fixed;
+
+ top: 0;
+ right: 0;
+ left: 0;
+
+ height: 23px;
+
+ display: block;
+}
+
+body > header img {
+ position: relative;
+ top: 3px;
+ left: 6px;
+}
+
+
+
+/** CHAT LOG */
+#frame {
+ display: block;
+ position: fixed;
+
+ top: 45px;
+ right: 200px;
+ bottom: 110px;
+ left: 20px;
+
+ border-width: 5px 7px 7px 5px;
+ -webkit-border-image: url(../images/inset-border.png) 5 7 7 5 stretch stretch;
+ -moz-border-image: url(../images/inset-border.png) 5 7 7 5 stretch stretch;
+ border-image: url(../images/inset-border.png) 5 7 7 5 stretch stretch;
+}
+
+#chat-log {
+ position: absolute;
+ left: 0.5%;
+ bottom: 0.5%;
+ width: 99%;
+ overflow: auto;
+ max-height: 99%;
+ color: #ccc;
+}
+
+#chat-log div.chat-msg {
+ margin-right: 10px;
+ padding: 6px 70px 6px 30px;
+ font-size: 10pt;
+ border-bottom: solid 1px #111;
+ -webkit-box-shadow: #444 0 1px 0;
+ -moz-box-shadow: #444 0 1px 0;
+ box-shadow: #444 0 1px 0;
+ margin-bottom: 1px;
+ border-width: 0 0 1px 0;
+ position: relative;
+ line-height: 140%;
+ text-indent: -20px;
+}
+
+#chat-log div.chat-system-msg {
+ text-align: center;
+ font-style: italic;
+ color: #888;
+ text-shadow: #000 0 -1px 0;
+}
+
+
+
+.chat-time {
+ position: absolute;
+ font-size: 10px;
+ height: 10pt;
+ line-height: 12px;
+ display: block;
+ float: left;
+ right: 6px;
+ top: 7px;
+ color: #111;
+ font-weight: bold;
+ font-style: normal;
+ text-shadow: #4a4a4a 0 1px 0;
+}
+
+#chat-log div.chat-msg .chat-nick {
+ color: #fff;
+ margin-right: 10px;
+}
+
+#chat-log div.chat-msg .chat-nick:after {
+ content: ":";
+}
+
+#chat-log div.chat-system-msg .chat-nick {
+ margin-right: 4px;
+ color: #888;
+ font-weight: bold;
+}
+
+#chat-log div.chat-system-msg .chat-nick:after {
+ content: "";
+}
+
+
+#chat-log div.chat-msg:nth-child(2n){
+ background: rgba(0,0,0,0.05);
+}
+
+
+/** USER LIST */
+
+#users {
+ position: fixed;
+ width: 155px;
+ top: 45px;
+ right: 25px;
+}
+
#users li {
- text-decoration: none;
color: #ccc;
- text-shadow: rgba(0,0,0,1) 0 -1px 0, rgba(0,0,0,0.4) 0 0 1px;
- font-family: helvetica, arial, sans-serif;
+ background: url(../images/button.png) no-repeat;
+
font-size: 14px;
- width: 155px;
- height: 35px;
- display: block;
text-align: center;
text-indent: -1px;
+ text-shadow: rgba(0,0,0,1) 0 -1px 0, rgba(0,0,0,0.4) 0 0 1px;
line-height: 30px;
- background: url(../images/button.png) no-repeat;
- position: relative;
+
margin: 0 0 5px 0;
+ width: 155px;
+ height: 35px;
+
+ position: relative;
cursor: pointer;
}
@@ -40,10 +178,7 @@ html, body {
background-position: 0 -72px;
}
-#users li:active:after {
- top: 26px;
-}
-
+/* Adds the glow */
#users li:after {
content: "";
display: block;
@@ -56,84 +191,18 @@ html, body {
background: url(../images/glows.png) no-repeat;
}
+#users li:active:after {
+ top: 26px;
+}
+
#users li.green:after { background-position: 0 0;}
#users li.orange:after { background-position: -57px 0;}
#users li.yellow:after { background-position: -114px 0;}
#users li.red:after { background-position: -171px 0;}
#users li.fuschia:after { background-position: -228px 0;}
#users li.blue:after { background-position: -285px 0;}
-#users {
- position: fixed;
- width: 155px;
- top: 45px;
- right: 25px;
-}
-
-#frame {
- display: block;
- position: fixed;
- left: 20px;
- right: 200px;
- top: 45px;
- bottom: 110px;
- border-width: 5px 7px 7px 5px;
- -webkit-border-image: url(../images/inset-border.png) 5 7 7 5 stretch stretch;
- -moz-border-image: url(../images/inset-border.png) 5 7 7 5 stretch stretch;
-}
-
-body > header {
- height: 23px;
- background: #000 url(../images/header-bg.png) repeat-x;
- -webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0;
- -moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0;
- box-shadow: rgba(255,255,255,0.1) 0 1px 0;
- position: fixed;
- left: 0;
- right: 0;
- top: 0;
- display: block;
-}
-
-body > header img {
- position: relative;
- top: 3px;
- left: 6px;
-}
-
-footer {
- height: 26px;
- position: fixed;
- left: 0;
- right: 0;
- bottom: 0;
- background: url(../images/footer.png) repeat-x;
-}
-
-footer p.credits {
- font-family: "Gill Sans", "Gill Sans MT", Helvetica, Arial, sans-serif;
- text-transform: uppercase;
- height: 26px;
- line-height: 26px;
- padding: 0 15px;
- font-size: 10px;
- text-align: right;
- color: #7b7b7b;
- text-shadow: #000 0 1px 0, #000 0 0 1px;
-}
-
-footer p.credits a {
- color: #aaa;
- text-decoration: none;
-}
-
-footer p.credits a:hover {
- color: #ccc;
-}
-
-span.pipe {
- margin: 0 3px;
-}
+/** ENTRY FORM */
#entry {
border-top: solid 1px #c2c2c2;
@@ -171,7 +240,6 @@ span.pipe {
height: 100%;
text-shadow: #000 0 1px 0;
font-size: 11pt;
- font-family: helvetica, arial, sans-serif;
}
#entry input[type=submit]{
@@ -183,7 +251,6 @@ span.pipe {
background: url(../images/send.png) no-repeat;
right: -6px;
top: -4px;
- font-family: helvetica, arial, sans-serif;
text-align: center;
width: 68px;
height: 27px;
@@ -209,9 +276,6 @@ span.pipe {
text-indent: 1px;
}
-#entry input[type=submit]{
-}
-
#entry fieldset {
position: absolute;
left: 20px;
@@ -226,87 +290,43 @@ span.pipe {
border-radius: 4px;
}
-#entry fieldset.focus {
-/* -webkit-box-shadow: rgba(255,255,255,1) 0 0 7px;*/
-}
+/** FOOTER */
-
-#chat-log {
- position: absolute;
- left: 0.5%;
- bottom: 0.5%;
- width: 99%;
- overflow: auto;
- max-height: 99%;
- font-family: helvetica, arial, sans-serif;
- color: #ccc;
-}
-
-#chat-log div.chat-msg {
- margin-right: 10px;
- padding: 6px 70px 6px 30px;
- font-size: 10pt;
- border-bottom: solid 1px #111;
- -webkit-box-shadow: #444 0 1px 0;
- -moz-box-shadow: #444 0 1px 0;
- box-shadow: #444 0 1px 0;
- margin-bottom: 1px;
- border-width: 0 0 1px 0;
- position: relative;
- line-height: 140%;
- text-indent: -20px;
-}
-
-#chat-log div.chat-system-msg {
- text-align: center;
- font-style: italic;
- color: #888;
- text-shadow: #000 0 -1px 0;
+footer {
+ height: 26px;
+ position: fixed;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: url(../images/footer.png) repeat-x;
}
-
-
-.chat-time {
- position: absolute;
+footer p.credits {
+ text-transform: uppercase;
+ height: 26px;
+ line-height: 26px;
+ padding: 0 15px;
font-size: 10px;
- height: 10pt;
- line-height: 12px;
- display: block;
- float: left;
- right: 6px;
- top: 7px;
- color: #111;
- font-weight: bold;
- font-style: normal;
- text-shadow: #4a4a4a 0 1px 0;
-}
-
-#chat-log div.chat-msg .chat-nick {
- color: #fff;
- margin-right: 10px;
-}
-
-#chat-log div.chat-msg .chat-nick:after {
- content: ":";
+ text-align: right;
+ color: #7b7b7b;
+ text-shadow: #000 0 1px 0, #000 0 0 1px;
}
-#chat-log div.chat-system-msg .chat-nick {
- margin-right: 4px;
- color: #888;
- font-weight: bold;
+footer p.credits a {
+ color: #aaa;
+ text-decoration: none;
}
-#chat-log div.chat-system-msg .chat-nick:after {
- content: "";
+footer p.credits a:hover {
+ color: #ccc;
}
-
-#chat-log div.chat-msg:nth-child(2n){
- background: rgba(0,0,0,0.05);
+span.pipe {
+ margin: 0 3px;
}
-
+/** LOGIN FORM */
#login {
position: fixed;
@@ -323,7 +343,6 @@ span.pipe {
}
#login h1 {
- font-family: "Gill Sans", "Gill Sans MT", Helvetica, Arial, sans-serif;
text-transform: uppercase;
color: #333;
text-align: center;
@@ -364,7 +383,6 @@ span.pipe {
}
#login p label {
- font-family: helvetica, arial, sans-serif;
color: #ddd;
font-size: 12px;
font-style: italic;

0 comments on commit 21c6cdd

Please sign in to comment.
Something went wrong with that request. Please try again.