[extra] Import Firefox 3.0 beta 5 tarball
[mozilla-extra.git] / extensions / irc / xul / content / output-base.css
bloba500a31b03882c2a3b8ff5675de46640c789b28e
1 /* -*- Mode: Text; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 4 -*-
2 * ***** BEGIN LICENSE BLOCK *****
3 * Version: MPL 1.1/GPL 2.0/LGPL 2.1
5 * The contents of this file are subject to the Mozilla Public License Version
6 * 1.1 (the "License"); you may not use this file except in compliance with
7 * the License. You may obtain a copy of the License at
8 * http://www.mozilla.org/MPL/
10 * Software distributed under the License is distributed on an "AS IS" basis,
11 * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
12 * for the specific language governing rights and limitations under the
13 * License.
15 * The Original Code is Chatzilla.
17 * The Initial Developer of the Original Code is
18 * New Dimensions Consulting, Inc.
19 * Portions created by the Initial Developer are Copyright (C) 1999
20 * the Initial Developer. All Rights Reserved.
22 * Contributor(s):
23 * Robert Ginda, rginda@ndcico.com, original author
25 * Alternatively, the contents of this file may be used under the terms of
26 * either the GNU General Public License Version 2 or later (the "GPL"), or
27 * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
28 * in which case the provisions of the GPL or the LGPL are applicable instead
29 * of those above. If you wish to allow use of your version of this file only
30 * under the terms of either the GPL or the LGPL, and not to allow others to
31 * use your version of this file under the terms of the MPL, indicate your
32 * decision by deleting the provisions above and replace them with the notice
33 * and other provisions required by the GPL or the LGPL. If you do not delete
34 * the provisions above, a recipient may use your version of this file under
35 * the terms of any one of the MPL, the GPL or the LGPL.
37 * ***** END LICENSE BLOCK ***** */
39 /*
40 * This file contains the CSS rules for the output window in ChatZilla.
41 * The output window is layed out as a table with two columns. The first
42 * column holds a message type or a nickname, depending on what view the
43 * message is contained by, and what kind of message it is. The second column
44 * contains the text of the message. For most message types, ChatZilla displays
45 * ascii-art instead of the actual code. For example, messages of type "JOIN"
46 * are displayed as "-->|", and most unclassified message types are displayed
47 * as "===". If you turn on debug messages (using the options->debug messages
48 * menuitem) ChatZilla will always show the actual message type. This can be
49 * helpful when styling a particular response from the IRC server. See the
50 * description of the msg-type attribute below.
52 * You can modify these styles on your local system by placing your desired
53 * styles in a file called chatzilla.css in your <profile>/chrome directory.
54 * (the file won't be there already, you have to create it.) Add the line
56 * @import url(chatzilla.css);
58 * to the to your userContent.css (also in your <profile>/chrome directory, and
59 * also not there unless you created it already.) End all CSS rules in your
60 * new chatzilla.css with !important to override any styles declared here.
61 * For example, on a Linux system, you would create a file called
62 * /home/<username>/.mozilla/<username>/chrome/userContent.css (if it
63 * doesn't already exist), and add the line @import url(chatzilla.css) to it.
64 * Next, create /home/<username>/.mozilla/<username>/chrome/chatzilla.css, and
65 * add the text:
67 * .msg {
68 * font-size: 14pt !important;
69 * }
71 * body.chatzilla-body {
72 * background: green !important;
73 * }
75 * Close your browser and restart. When you bring up ChatZilla, it should have
76 * a 14pt font and a green background.
78 * To learn how to make more useful changes to the ChatZilla output style, read
79 * on.
81 * All of the output in the message window is contained in an html <TABLE>.
82 * New messages are composed of <TR> and <TD> elements inside this <TABLE>.
83 * The message table and it's children have the following CSS classes assigned
84 * to them:
86 * + .msg-table is used as the class for the surrounding <TABLE>.
87 * Styles applied to this class will affect all parts of all messages.
89 * + .msg-nested-table is used as the class for the surrounding <TABLE> for
90 * messages sent from users with long nicknames. A new table is created, and
91 * nested inside a <TR colspan="2"> of the .msg-table. The rows of this
92 * table have their classes set as if they were direct children of the
93 * .msg-table. Placing messages from users with long nicknames in a nested
94 * table keeps the nickname column from getting too wide.
96 * + .msg is used as the class for the surrounding <TR>. This means that
97 * any styles applied here will affect the entire message.
99 * + .msg-timestamp is used as the class for the <TD> that has all the time
100 * information on it. Styles on this class will affect the time stamps
101 * against messages (but not the format of the time).
103 * + .msg-type is used as the class for the <TD> surrounding the message type
104 * portion of messages. Styles applied here will only affect message
105 * types. ie. "-->|", or "[HELP]".
107 * + .msg-user is used as the class for the <TD> surrounding the nickname
108 * portion of messages. ChatZilla makes use of the :before and :after
109 * pseudoclasses to decorate nicknames with different characters depending
110 * on their message type. For example, when a user performs a /me, their
111 * nickname may be surrounded by asterisks.
113 * + .msg-data is used as the class for the <TD> surrounding the actual text
114 * of the message.
116 * In addition to CSS class properties, portions of a message may have one
117 * or mode of the following attributes set:
119 * + view-type is the type of view the message is contained in. The types
120 * are:
121 * "IRCClient" for the *client* view
122 * "IRCNetwork" for network and server views
123 * "IRCChannel" for channel views
124 * "IRCUser" for query views
126 * + msg-type is the message type described above. There are too many types
127 * to list here. Turn on debug messages to force message types to print
128 * in the left column of the output.
130 * + msg-user is the nickname (in lowercase) of the nickname who sent the
131 * message. If you sent the message, msg-user will be set to "ME!", so
132 * that you can style your messages regardless of your nickname.
134 * + msg-dest is the name of the object that the message is directed to. It
135 * could be a channel name, or a nickname (both in lowercase.)
137 * + dest-type is the type of object the message is directed to. The types
138 * are:
139 * "IRCChannel" for messages sent to a channel.
140 * "IRCUser" for messages sent directly to another user, including
141 * private messages that appear in a network or channel view (when
142 * a dedicated query view does not exist.)
144 * + mark is either the text "even" or "odd". When the first user speaks on
145 * a channel, that message is marked as "even". Messages will continue to
146 * be marked "even" until a different user speaks, when the mark switches
147 * to "odd". Each view maintains it's own mark state. An example of how
148 * ChatZilla marks messages would be:
150 * EVEN: <moe> this deep fat fry-o-later is great.
151 * EVEN: <moe> It'll deep fat fry a whole buffalo in 30 seconds.
152 * ODD: <homer> but I'm hungry *now*!
154 * + important is either the text "true", or it is not set at all. If
155 * important is true, then the message triggered ChatZilla /stalk function.
156 * This occurs when someone with a nickname matching a pattern in your
157 * /stalk list speaks, when someone says a word that matches a pattern in
158 * your /stalk list, or when someone says your nickname.
163 /******************************************************************************
164 * basic classes *
165 ******************************************************************************/
167 body.chatzilla-body { /* The topmost container in the ChatZilla */
168 margin: 0px 0px 0px 0px; /* output window. */
169 background: #FFFFFF;
170 color: #000000;
173 a:link {
174 color: #0000EE;
176 a:active {
177 color: #EE0000;
179 a:visited {
180 color: #551A8B;
183 /* links */
184 a.chatzilla-link {
185 text-decoration: none;
186 direction: ltr;
187 unicode-bidi: embed;
190 /* link hover effect */
191 a.chatzilla-link:hover {
192 text-decoration: underline;
195 /* basic styles */
196 .chatzilla-highlight[name="Large"] {
197 font-size: larger;
200 .chatzilla-highlight[name="Small"] {
201 font-size: smaller;
204 .chatzilla-highlight[name="Bold text"],
205 .chatzilla-bold, a.chatzilla-bold.chatzilla-link {
206 font-weight: bold;
209 .chatzilla-italic {
210 font-style: italic;
213 .chatzilla-underline, a.chatzilla-underline.chatzilla-link {
214 text-decoration: underline;
217 .chatzilla-teletype {
218 font-family: monospace;
221 .chatzilla-rheet {
222 font-weight: bold;
225 .chatzilla-decor {
226 display: none;
229 /* mirc colors */
230 .chatzilla-fg00, a.chatzilla-fg00.chatzilla-link {
231 color: #FFFFFF;
234 .chatzilla-fg01, a.chatzilla-fg01.chatzilla-link {
235 color: #000000;
238 .chatzilla-fg02, a.chatzilla-fg02.chatzilla-link {
239 color: #00007F;
242 .chatzilla-fg03, a.chatzilla-fg03.chatzilla-link {
243 color: #009300;
246 .chatzilla-fg04, a.chatzilla-fg04.chatzilla-link {
247 color: #FF0000;
250 .chatzilla-fg05, a.chatzilla-fg05.chatzilla-link {
251 color: #7F0000;
254 .chatzilla-fg06, a.chatzilla-fg06.chatzilla-link {
255 color: #9C009C;
258 .chatzilla-fg07, a.chatzilla-fg07.chatzilla-link {
259 color: #FC7F00;
262 .chatzilla-fg08, a.chatzilla-fg08.chatzilla-link {
263 color: #FFFF00;
266 .chatzilla-fg09, a.chatzilla-fg09.chatzilla-link {
267 color: #00FC00;
270 .chatzilla-fg10, a.chatzilla-fg10.chatzilla-link {
271 color: #009393;
274 .chatzilla-fg11, a.chatzilla-fg11.chatzilla-link {
275 color: #00FFFF;
278 .chatzilla-fg12, a.chatzilla-fg12.chatzilla-link {
279 color: #0000FC;
282 .chatzilla-fg13, a.chatzilla-fg13.chatzilla-link {
283 color: #FF00FF;
286 .chatzilla-fg14, a.chatzilla-fg14.chatzilla-link {
287 color: #7F7F7F;
290 .chatzilla-fg15, a.chatzilla-fg15.chatzilla-link {
291 color: #D2D2D2;
294 .chatzilla-bg00, a.chatzilla-bg00.chatzilla-link {
295 background-color: #FFFFFF;
298 .chatzilla-bg01, a.chatzilla-bg01.chatzilla-link {
299 background-color: #000000;
302 .chatzilla-bg02, a.chatzilla-bg02.chatzilla-link {
303 background-color: #00007F;
306 .chatzilla-bg03, a.chatzilla-bg03.chatzilla-link {
307 background-color: #009300;
310 .chatzilla-bg04, a.chatzilla-bg04.chatzilla-link {
311 background-color: #FF0000;
314 .chatzilla-bg05, a.chatzilla-bg05.chatzilla-link {
315 background-color: #7F0000;
318 .chatzilla-bg06, a.chatzilla-bg06.chatzilla-link {
319 background-color: #9C009C;
322 .chatzilla-bg07, a.chatzilla-bg07.chatzilla-link {
323 background-color: #FC7F00;
326 .chatzilla-bg08, a.chatzilla-bg08.chatzilla-link {
327 background-color: #FFFF00;
330 .chatzilla-bg09, a.chatzilla-bg09.chatzilla-link {
331 background-color: #00FC00;
334 .chatzilla-bg10, a.chatzilla-bg10.chatzilla-link {
335 background-color: #009393;
338 .chatzilla-bg11, a.chatzilla-bg11.chatzilla-link {
339 background-color: #00FFFF;
342 .chatzilla-bg12, a.chatzilla-bg12.chatzilla-link {
343 background-color: #0000FC;
346 .chatzilla-bg13, a.chatzilla-bg13.chatzilla-link {
347 background-color: #FF00FF;
350 .chatzilla-bg14, a.chatzilla-bg14.chatzilla-link {
351 background-color: #7F7F7F;
354 .chatzilla-bg15, a.chatzilla-bg15.chatzilla-link {
355 background-color: #D2D2D2;
358 .chatzilla-control-char:before {
359 content: "[\\";
362 .chatzilla-control-char:after {
363 content: "]";
366 /* smiley faces */
367 .chatzilla-emote-txt { /* emoticon text inside */
368 display: none;
371 .chatzilla-emote:after { /* empty span to attach :after images to */
372 margin-left: 3px;
373 margin-right: 3px;
374 content: url(chrome://chatzilla/skin/images/face-question.png);
377 .chatzilla-emote[type="face-alien"]:after {
378 content: url(chrome://chatzilla/skin/images/face-alien.png);
381 .chatzilla-emote[type="face-angry"]:after {
382 content: url(chrome://chatzilla/skin/images/face-angry.png);
385 .chatzilla-emote[type="face-cry"]:after {
386 content: url(chrome://chatzilla/skin/images/face-cry.png);
389 .chatzilla-emote[type="face-confused"]:after {
390 content: url(chrome://chatzilla/skin/images/face-confused.png);
393 .chatzilla-emote[type="face-cool"]:after {
394 content: url(chrome://chatzilla/skin/images/face-cool.png);
397 .chatzilla-emote[type="face-dizzy"]:after {
398 content: url(chrome://chatzilla/skin/images/face-dizzy.png);
401 .chatzilla-emote[type="face-dizzy-back"]:after {
402 content: url(chrome://chatzilla/skin/images/face-dizzy-back.png);
405 .chatzilla-emote[type="face-eek"]:after {
406 content: url(chrome://chatzilla/skin/images/face-eek.png);
409 .chatzilla-emote[type="face-evil"]:after {
410 content: url(chrome://chatzilla/skin/images/face-evil.png);
413 .chatzilla-emote[type="face-laugh"]:after {
414 content: url(chrome://chatzilla/skin/images/face-laugh.png);
417 .chatzilla-emote[type="face-lol"]:after {
418 content: url(chrome://chatzilla/skin/images/face-lol.png);
421 .chatzilla-emote[type="face-normal"]:after {
422 content: url(chrome://chatzilla/skin/images/face-normal.png);
425 .chatzilla-emote[type="face-question"]:after {
426 content: url(chrome://chatzilla/skin/images/face-question.png);
429 .chatzilla-emote[type="face-red"]:after {
430 content: url(chrome://chatzilla/skin/images/face-red.png);
433 .chatzilla-emote[type="face-rofl"]:after {
434 content: url(chrome://chatzilla/skin/images/face-rofl.png);
437 .chatzilla-emote[type="face-rolleyes"]:after {
438 content: url(chrome://chatzilla/skin/images/face-rolleyes.png);
441 .chatzilla-emote[type="face-sad"]:after {
442 content: url(chrome://chatzilla/skin/images/face-sad.png);
445 .chatzilla-emote[type="face-smile"]:after {
446 content: url(chrome://chatzilla/skin/images/face-smile.png);
449 .chatzilla-emote[type="face-surprised"]:after {
450 content: url(chrome://chatzilla/skin/images/face-surprised.png);
453 .chatzilla-emote[type="face-tongue"]:after {
454 content: url(chrome://chatzilla/skin/images/face-tongue.png);
457 .chatzilla-emote[type="face-wink"]:after {
458 content: url(chrome://chatzilla/skin/images/face-wink.png);
461 /******************************************************************************
462 * message class base definitions *
463 ******************************************************************************/
465 .msg-table { /* <TABLE> containing all of the */
466 width: 100%; /* messages. */
469 .msg-nested-table { /* <TABLE> nested inside */
470 width: 100%; /* .msg-table for users with long */
471 margin: 0px; /* nicknames. */
472 border: 0px;
473 border-spacing: 0px;
474 padding: 0px;
477 .msg { /* .msg = a single message in the */
478 width: 100%; /* output window */
481 .msg-timestamp { /* .msg-timestamp = timestamp for */
482 font-style: normal !important; /* the message, done using */
483 vertical-align: top; /* :before and content. */
484 white-space: nowrap;
487 .msg-type { /* .msg-type = message type */
488 font-variant: small-caps; /* indicator */
489 font-size: 90%;
490 padding-right: 10px;
491 text-align: right;
492 vertical-align: top;
493 white-space: nowrap;
496 .msg-user { /* msg-user = nickname portion of */
497 text-align: right; /* a message (channel and query */
498 vertical-align: top; /* views) */
499 white-space: nowrap;
502 .msg-data { /* .msg-data = the text portion */
503 padding: 1px 1px 1px 3px; /* of a message */
504 width: 100%;
505 /* need to set this twice for back+forward compat, see bug 418543 */
506 white-space: -moz-pre-wrap;
507 white-space: pre-wrap;
511 /******************************************************************************
512 * message class specific definitions *
513 ******************************************************************************/
515 /* msg-user is the nickname of the person who spoke, or "ME!" if you said it.
516 * msg-type is the type of the message, taken from the irc message. If you
517 * turn on debug messages (options->debug messages), the msg-types will be
518 * displayed to the left of the messages for all messages except:
519 * PRIVMSG: when a user sends you, or a channel you are on a message.
520 * ACTION: when a user performs a /me.
521 * NOTIFY: when a server or user sends you a notification.
523 .msg[msg-user="|"] .msg-data, /* messages from common "bulk */
524 .msg[msg-user="||"] .msg-data, /* paste" nicks */
525 .msg[msg-user="|||"] .msg-data,
526 .msg[msg-user="]"] .msg-data,
527 .msg[msg-user="["] .msg-data,
528 .msg[msg-type="372"] .msg-data, /* MOTD */
529 .msg[msg-type="EVAL-IN"] .msg-data, /* /eval results */
530 .msg[msg-type="EVAL-OUT"] .msg-data {
531 font-size: 90%;
532 font-family: monospace;
535 .msg[msg-type="USAGE"] .msg-data {
536 font-style: italic;
539 .msg[msg-type="HELP"] .msg-data {
540 font-weight: normal;
543 .msg[msg-type="ACTION"] .msg-user {
544 font-style: italic;
547 .msg[important="true"] .msg-user {
548 font-weight: bold;
551 /******************************************************************************
552 * nickname decorations *
553 ******************************************************************************/
555 /* :before and :after pseudoclasses form the decorations around nicknames */
556 .msg-user:before {
557 content: "<";
559 .msg-user:after {
560 content: ">";
562 .msg[important="true"] .msg-user:before {
563 font-weight: bold;
565 .msg[important="true"] .msg-user:after {
566 font-weight: bold;
568 .msg[msg-user$="ME!"] .msg-user:before {
569 content: "<";
571 .msg[msg-user$="ME!"] .msg-user:after {
572 content: ">";
574 .msg[msg-type="ACTION"] .msg-user:before,
575 .msg[msg-type="ACTION"] .msg-user:after {
576 content: "";
578 .msg[msg-type="NOTICE"] .msg-user:before {
579 content: "[";
581 .msg[msg-type="NOTICE"] .msg-user:after {
582 content: "]";
585 /* private messages *not* in a query window */
586 .msg[dest-type="IRCUser"] .msg-user:before {
587 content: "to(";
589 .msg[dest-type="IRCUser"][msg-dest$="ME!"] .msg-user:before {
590 content: "from(";
592 .msg[dest-type="IRCUser"] .msg-user:after {
593 content: ")";
596 /* private messages in a query window */
597 .msg[view-type="IRCUser"] .msg-user:before {
598 content: "{";
600 .msg[view-type="IRCUser"] .msg-user:after {
601 content: "}";
603 .msg[view-type="IRCUser"][msg-dest$="ME!"] .msg-user:before {
604 content: "{";
606 .msg[view-type="IRCUser"][msg-dest$="ME!"] .msg-user:after {
607 content: "}";