rc@74
|
1 #chat,
|
rob@91
|
2 #nickname,
|
rc@74
|
3 #messages {
|
rob@81
|
4 width: 180px;
|
rob@81
|
5 height:90%;
|
rc@74
|
6 }
|
rob@81
|
7
|
rc@74
|
8 #chat {
|
rc@74
|
9 position: relative;
|
rc@74
|
10 border: 0px solid #ccc;
|
rc@74
|
11 border-radius: 15px;
|
rob@81
|
12 height:100%;
|
rc@74
|
13 }
|
rob@91
|
14
|
rob@91
|
15 #nickname,
|
rc@74
|
16 #connecting {
|
rc@74
|
17 position: absolute;
|
rob@81
|
18 height: 90%;
|
rc@74
|
19 z-index: 100;
|
rob@95
|
20 left: -900px;
|
rc@74
|
21 top: 0;
|
rob@95
|
22 background: black;
|
rc@74
|
23 text-align: center;
|
rob@95
|
24 width: 750px;
|
rc@74
|
25 font: 15px Georgia;
|
rob@81
|
26 color: orange;
|
rob@95
|
27 opacity:0.9;
|
rc@74
|
28 display: block;
|
rob@97
|
29 border:2px solid red;
|
rc@74
|
30 }
|
rob@95
|
31
|
rc@74
|
32 #nickname .wrap,
|
rob@95
|
33 #connecting .wrap {padding-top: 130px; }
|
rob@97
|
34 #nickname input { border: 1px solid #ccc; padding: 10px; margin-top:30px;}
|
rc@74
|
35 #nickname input:focus { border-color: #999; outline: 0; }
|
rc@74
|
36 #nickname #nickname-err { color: #8b0000; font-size: 12px; visibility: hidden; }
|
rob@95
|
37
|
rc@74
|
38 .connected #connecting { display: none; }
|
rob@95
|
39
|
rob@95
|
40 .nickname-set #nickname {
|
rob@95
|
41 display: none;
|
rob@95
|
42 }
|
rob@95
|
43
|
rob@81
|
44 #messages {
|
rob@97
|
45 height: 50%;
|
rob@97
|
46 background: gray;
|
rob@97
|
47 border: 1px solid red;
|
rob@97
|
48 border-radius:10px;
|
rob@97
|
49 padding:5px;
|
rob@97
|
50 position:relative;
|
rob@97
|
51 right:4px;
|
rob@97
|
52 opacity:0.9;
|
rob@81
|
53 }
|
rob@81
|
54
|
rob@81
|
55 #messages em { color: white; }
|
rob@95
|
56
|
rc@74
|
57 #messages p {
|
rc@74
|
58 padding: 0;
|
rc@74
|
59 margin: 0;
|
rc@74
|
60 font: 14px Helvetica, Arial;
|
rc@74
|
61 padding: 0px 10px;
|
rob@81
|
62 color: white;
|
rc@74
|
63 }
|
rob@95
|
64
|
rc@74
|
65 #messages p b {
|
rc@74
|
66 display: inline-block;
|
rc@74
|
67 padding-right: 10px;
|
rob@81
|
68 color: white;
|
rc@74
|
69 }
|
rc@74
|
70
|
rc@74
|
71 #messages p:nth-child(even) {
|
rob@97
|
72 background: green;
|
rob@81
|
73 color: white;
|
rc@74
|
74 }
|
rob@95
|
75
|
rc@74
|
76 #messages #nicknames {
|
rob@97
|
77 background: white;
|
rob@97
|
78 border: 1px solid purple;
|
rc@74
|
79 padding: 2px 4px 4px;
|
rob@81
|
80 margin-top:12px;
|
rc@74
|
81 font: 11px Helvetica;
|
rob@97
|
82 color: purple;
|
rob@97
|
83 min-height:10px;
|
rc@74
|
84 }
|
rc@74
|
85 #messages #nicknames span {
|
rob@81
|
86 color: orange;
|
rc@74
|
87 }
|
rc@74
|
88 #messages #nicknames b {
|
rc@74
|
89 display: inline-block;
|
rob@81
|
90 background: gray;
|
rc@74
|
91 margin-right: 5px;
|
rob@81
|
92 color: white;
|
rc@74
|
93 }
|
rc@74
|
94 #messages #lines {
|
rob@81
|
95 height: 90%;
|
rob@81
|
96 overflOw: auto;
|
rc@74
|
97 overflow-x: hidden;
|
rc@74
|
98 overflow-y: auto;
|
rc@74
|
99 }
|
rc@74
|
100 #messages #lines::-webkit-scrollbar {
|
rc@74
|
101 width: 6px;
|
rc@74
|
102 height: 6px;
|
rc@74
|
103 }
|
rc@74
|
104 #messages #lines::-webkit-scrollbar-button:start:decrement,
|
rc@74
|
105 #messages #lines ::-webkit-scrollbar-button:end:increment {
|
rc@74
|
106 display: block;
|
rc@74
|
107 height: 10px;
|
rc@74
|
108 }
|
rc@74
|
109 #messages #lines::-webkit-scrollbar-button:vertical:increment {
|
rc@74
|
110 background-color: #fff;
|
rc@74
|
111 }
|
rc@74
|
112 #messages #lines::-webkit-scrollbar-track-piece {
|
rc@74
|
113 background-color: #fff;
|
rc@74
|
114 -webkit-border-radius: 3px;
|
rc@74
|
115 }
|
rc@74
|
116 #messages #lines::-webkit-scrollbar-thumb:vertical {
|
rc@74
|
117 height: 50px;
|
rc@74
|
118 background-color: #ccc;
|
rc@74
|
119 -webkit-border-radius: 3px;
|
rc@74
|
120 }
|
rc@74
|
121 #messages #lines::-webkit-scrollbar-thumb:horizontal {
|
rc@74
|
122 width: 50px;
|
rc@74
|
123 background-color: #fff;
|
rc@74
|
124 -webkit-border-radius: 3px;
|
rc@74
|
125 }
|
rc@74
|
126 #send-message {
|
rob@91
|
127 background: white;
|
rob@81
|
128 border-radius:1px;
|
rob@81
|
129 position:relative;
|
rob@97
|
130 bottom:60px;
|
rob@97
|
131 padding-left:15px;
|
rob@97
|
132 width:80%;
|
rob@97
|
133 background:transparent;
|
rc@74
|
134 }
|
rob@97
|
135
|
rc@74
|
136 #send-message input {
|
rc@74
|
137 height: 20px;
|
rc@74
|
138 line-height: 20px;
|
rc@74
|
139 vertical-align: middle;
|
rob@97
|
140 width: 95%;
|
rob@97
|
141 padding-left:15px;
|
rc@74
|
142 }
|
rob@91
|
143
|
rc@74
|
144 #send-message input:focus {
|
rc@74
|
145 outline: 0;
|
rc@74
|
146 }
|