rc-web@5
|
1 #chat,
|
rc-web@5
|
2 #nickname,
|
rc-web@5
|
3 #messages {
|
rc-web@38
|
4 width: 350px;
|
rc-web@5
|
5 }
|
rc-web@5
|
6 #chat {
|
rc-web@38
|
7 position: relative;
|
rc-web@38
|
8 border: 0px solid #ccc;
|
rc-web@38
|
9 background: black;
|
rc-web@38
|
10 border-radius: 15px;
|
rc-web@5
|
11 }
|
rc-web@5
|
12 #nickname,
|
rc-web@5
|
13 #connecting {
|
rc-web@38
|
14 position: absolute;
|
rc-web@38
|
15 height: 185px;
|
rc-web@38
|
16 z-index: 100;
|
rc-web@38
|
17 left: 0;
|
rc-web@38
|
18 top: 0;
|
rc-web@38
|
19 background: black;
|
rc-web@38
|
20 text-align: center;
|
rc-web@38
|
21 width: 350px;
|
rc-web@38
|
22 font: 15px Georgia;
|
rc-web@38
|
23 color: white;
|
rc-web@5
|
24 display: block;
|
rc-web@5
|
25 }
|
rc-web@5
|
26 #nickname .wrap,
|
rc-web@5
|
27 #connecting .wrap {
|
rc-web@38
|
28 padding-top: 60px;
|
rc-web@5
|
29 }
|
rc-web@5
|
30 #nickname input {
|
rc-web@5
|
31 border: 1px solid #ccc;
|
rc-web@5
|
32 padding: 10px;
|
rc-web@5
|
33 }
|
rc-web@5
|
34 #nickname input:focus {
|
rc-web@5
|
35 border-color: #999;
|
rc-web@5
|
36 outline: 0;
|
rc-web@5
|
37 }
|
rc-web@5
|
38 #nickname #nickname-err {
|
rc-web@5
|
39 color: #8b0000;
|
rc-web@5
|
40 font-size: 12px;
|
rc-web@5
|
41 visibility: hidden;
|
rc-web@5
|
42 }
|
rc-web@5
|
43 .connected #connecting {
|
rc-web@5
|
44 display: none;
|
rc-web@5
|
45 }
|
rc-web@5
|
46 .nickname-set #nickname {
|
rc-web@5
|
47 display: none;
|
rc-web@5
|
48 }
|
rc-web@5
|
49 #messages {
|
rc-web@38
|
50 height: 160px;
|
rc-web@38
|
51 !background: #eee;
|
rc-web@38
|
52 background: black;
|
rc-web@5
|
53 }
|
rc-web@5
|
54 #messages em {
|
rc-web@38
|
55 !text-shadow: 0 1px 0 #fff;
|
rc-web@38
|
56 !color: #999;
|
rc-web@38
|
57 color: white;
|
rc-web@5
|
58 }
|
rc-web@5
|
59 #messages p {
|
rc-web@5
|
60 padding: 0;
|
rc-web@5
|
61 margin: 0;
|
rc-web@38
|
62 font: 11px Helvetica, Arial;
|
rc-web@38
|
63 padding: 0px 10px;
|
rc-web@38
|
64 color: white;
|
rc-web@5
|
65 }
|
rc-web@5
|
66 #messages p b {
|
rc-web@5
|
67 display: inline-block;
|
rc-web@5
|
68 padding-right: 10px;
|
rc-web@38
|
69 color: white;
|
rc-web@5
|
70 }
|
rc-web@5
|
71 #messages p:nth-child(even) {
|
rc-web@38
|
72 !background: #fafafa;
|
rc-web@38
|
73 background: black;
|
rc-web@38
|
74 color: white;
|
rc-web@5
|
75 }
|
rc-web@38
|
76 #messages #nicknames {
|
rc-web@38
|
77 background: black;
|
rc-web@38
|
78 padding: 2px 4px 4px;
|
rc-web@38
|
79 font: 11px Helvetica;
|
rc-web@38
|
80 color: white;
|
rc-web@38
|
81 }
|
rc-web@5
|
82 #messages #nicknames span {
|
rc-web@5
|
83 color: #000;
|
rc-web@38
|
84 color: white;
|
rc-web@5
|
85 }
|
rc-web@5
|
86 #messages #nicknames b {
|
rc-web@5
|
87 display: inline-block;
|
rc-web@38
|
88 background: black;
|
rc-web@5
|
89 margin-right: 5px;
|
rc-web@38
|
90 color: yellow;
|
rc-web@5
|
91 }
|
rc-web@5
|
92 #messages #lines {
|
rc-web@38
|
93 height: 140px;
|
rc-web@5
|
94 overflow: auto;
|
rc-web@38
|
95 overflow-x: hidden;
|
rc-web@5
|
96 overflow-y: auto;
|
rc-web@5
|
97 }
|
rc-web@5
|
98 #messages #lines::-webkit-scrollbar {
|
rc-web@5
|
99 width: 6px;
|
rc-web@5
|
100 height: 6px;
|
rc-web@5
|
101 }
|
rc-web@5
|
102 #messages #lines::-webkit-scrollbar-button:start:decrement,
|
rc-web@5
|
103 #messages #lines ::-webkit-scrollbar-button:end:increment {
|
rc-web@5
|
104 display: block;
|
rc-web@5
|
105 height: 10px;
|
rc-web@5
|
106 }
|
rc-web@5
|
107 #messages #lines::-webkit-scrollbar-button:vertical:increment {
|
rc-web@5
|
108 background-color: #fff;
|
rc-web@5
|
109 }
|
rc-web@5
|
110 #messages #lines::-webkit-scrollbar-track-piece {
|
rc-web@5
|
111 background-color: #fff;
|
rc-web@5
|
112 -webkit-border-radius: 3px;
|
rc-web@5
|
113 }
|
rc-web@5
|
114 #messages #lines::-webkit-scrollbar-thumb:vertical {
|
rc-web@5
|
115 height: 50px;
|
rc-web@5
|
116 background-color: #ccc;
|
rc-web@5
|
117 -webkit-border-radius: 3px;
|
rc-web@5
|
118 }
|
rc-web@5
|
119 #messages #lines::-webkit-scrollbar-thumb:horizontal {
|
rc-web@5
|
120 width: 50px;
|
rc-web@5
|
121 background-color: #fff;
|
rc-web@5
|
122 -webkit-border-radius: 3px;
|
rc-web@5
|
123 }
|
rc-web@5
|
124 #send-message {
|
rc-web@38
|
125 background: gray;
|
rc-web@5
|
126 position: relative;
|
rc-web@38
|
127 border-radius:5px;
|
rc-web@5
|
128 }
|
rc-web@5
|
129 #send-message input {
|
rc-web@38
|
130 border: none;
|
rc-web@38
|
131 height: 20px;
|
rc-web@38
|
132 padding: 0 0px;
|
rc-web@38
|
133 line-height: 20px;
|
rc-web@5
|
134 vertical-align: middle;
|
rc-web@38
|
135 width: 330px;
|
rc-web@38
|
136 background:gray;
|
rc-web@38
|
137 color: yellow;
|
rc-web@38
|
138 border-radius:5px;
|
rc-web@5
|
139 }
|
rc-web@5
|
140 #send-message input:focus {
|
rc-web@5
|
141 outline: 0;
|
rc-web@5
|
142 }
|
rc-web@38
|
143 #send-message button {
|
rc-web@38
|
144 position: absolute;
|
rc-web@38
|
145 top: 3px;
|
rc-web@5
|
146 right: 5px;
|
rc-web@38
|
147 }
|
rc-web@38
|
148 button {
|
rc-web@38
|
149 margin: 0;
|
rc-web@38
|
150 -webkit-user-select: none;
|
rc-web@38
|
151 -moz-user-select: none;
|
rc-web@38
|
152 user-select: none;
|
rc-web@38
|
153 display: inline-block;
|
rc-web@38
|
154 text-decoration: none;
|
rc-web@38
|
155 background: #43a1f7;
|
rc-web@38
|
156 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #43a1f7), color-stop(1, #377ad0));
|
rc-web@38
|
157 background: -webkit-linear-gradient(top, #43a1f7 0%, #377ad0 100%);
|
rc-web@38
|
158 background: -moz-linear-gradient(top, #43a1f7 0%, #377ad0 100%);
|
rc-web@38
|
159 background: linear-gradient(top, #43a1f7 0%, #377ad0 100%);
|
rc-web@38
|
160 border: 1px solid #2e70c4;
|
rc-web@38
|
161 -webkit-border-radius: 16px;
|
rc-web@38
|
162 -moz-border-radius: 16px;
|
rc-web@38
|
163 border-radius: 16px;
|
rc-web@38
|
164 color: #fff;
|
rc-web@38
|
165 font-family: "lucida grande", sans-serif;
|
rc-web@38
|
166 font-size: 11px;
|
rc-web@38
|
167 font-weight: normal;
|
rc-web@38
|
168 line-height: 1;
|
rc-web@38
|
169 !padding: 3px 10px 5px 10px;
|
rc-web@38
|
170 text-align: center;
|
rc-web@38
|
171 text-shadow: 0 -1px 1px #2d6dc0;
|
rc-web@38
|
172 }
|
rc-web@38
|
173 button:hover,
|
rc-web@38
|
174 button.hover {
|
rc-web@38
|
175 background: darker;
|
rc-web@38
|
176 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #43a1f7), color-stop(1, #2e70c4));
|
rc-web@38
|
177 background: -webkit-linear-gradient(top, #43a1f7 0%, #2e70c4 100%);
|
rc-web@38
|
178 background: -moz-linear-gradient(top, #43a1f7 0%, #2e70c4 100%);
|
rc-web@38
|
179 background: linear-gradient(top, #43a1f7 0%, #2e70c4 100%);
|
rc-web@38
|
180 border: 1px solid #2e70c4;
|
rc-web@38
|
181 cursor: pointer;
|
rc-web@38
|
182 text-shadow: 0 -1px 1px #2c6bbb;
|
rc-web@38
|
183 }
|
rc-web@38
|
184 button:active,
|
rc-web@38
|
185 button.active {
|
rc-web@38
|
186 background: #2e70c4;
|
rc-web@38
|
187 border: 1px solid #2e70c4;
|
rc-web@38
|
188 border-bottom: 1px solid #2861aa;
|
rc-web@38
|
189 text-shadow: 0 -1px 1px #2b67b5;
|
rc-web@38
|
190 }
|
rc-web@38
|
191 button:focus,
|
rc-web@38
|
192 button.focus {
|
rc-web@38
|
193 outline: none;
|
rc-web@38
|
194 -webkit-box-shadow: 0 1px 0 0 rgba(255,255,255,0.40), 0 0 4px 0 #377ad0;
|
rc-web@38
|
195 -moz-box-shadow: 0 1px 0 0 rgba(255,255,255,0.40), 0 0 4px 0 #377ad0;
|
rc-web@38
|
196 box-shadow: 0 1px 0 0 rgba(255,255,255,0.40), 0 0 4px 0 #377ad0;
|
rc-web@5
|
197 } |