pjs/extensions/irc/xul/content/output-base.css

/* -*- Mode: Text; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 4 -*-
 * ***** BEGIN LICENSE BLOCK *****
 * Version: MPL 1.1/GPL 2.0/LGPL 2.1
 *
 * The contents of this file are subject to the Mozilla Public License Version
 * 1.1 (the "License"); you may not use this file except in compliance with
 * the License. You may obtain a copy of the License at
 * http://www.mozilla.org/MPL/
 *
 * Software distributed under the License is distributed on an "AS IS" basis,
 * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
 * for the specific language governing rights and limitations under the
 * License.
 *
 * The Original Code is Chatzilla.
 *
 * The Initial Developer of the Original Code is
 * New Dimensions Consulting, Inc.
 * Portions created by the Initial Developer are Copyright (C) 1999
 * the Initial Developer. All Rights Reserved.
 *
 * Contributor(s):
 *   Robert Ginda, rginda@ndcico.com, original author
 *
 * Alternatively, the contents of this file may be used under the terms of
 * either the GNU General Public License Version 2 or later (the "GPL"), or
 * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
 * in which case the provisions of the GPL or the LGPL are applicable instead
 * of those above. If you wish to allow use of your version of this file only
 * under the terms of either the GPL or the LGPL, and not to allow others to
 * use your version of this file under the terms of the MPL, indicate your
 * decision by deleting the provisions above and replace them with the notice
 * and other provisions required by the GPL or the LGPL. If you do not delete
 * the provisions above, a recipient may use your version of this file under
 * the terms of any one of the MPL, the GPL or the LGPL.
 *
 * ***** END LICENSE BLOCK ***** */

/* 
 * This file contains the CSS rules for the output window in ChatZilla.
 * The output window is layed out as a table with two columns.  The first
 * column holds a message type or a nickname, depending on what view the
 * message is contained by, and what kind of message it is.  The second column
 * contains the text of the message.  For most message types, ChatZilla displays
 * ascii-art instead of the actual code.  For example, messages of type "JOIN"
 * are displayed as "-->|", and most unclassified message types are displayed
 * as "===".  If you turn on debug messages (using the options->debug messages
 * menuitem) ChatZilla will always show the actual message type.  This can be
 * helpful when styling a particular response from the IRC server.  See the
 * description of the msg-type attribute below.
 *
 * You can modify these styles on your local system by placing your desired
 * styles in a file called chatzilla.css in your <profile>/chrome directory.
 * (the file won't be there already, you have to create it.)  Add the line
 *
 *     @import url(chatzilla.css);
 *
 * to the to your userContent.css (also in your <profile>/chrome directory, and
 * also not there unless you created it already.)  End all CSS rules in your
 * new chatzilla.css with !important to override any styles declared here.
 * For example, on a Linux system, you would create a file called
 * /home/<username>/.mozilla/<username>/chrome/userContent.css (if it
 * doesn't already exist), and add the line @import url(chatzilla.css) to it.
 * Next, create /home/<username>/.mozilla/<username>/chrome/chatzilla.css, and
 * add the text:
 *
 *   .msg {
 *     font-size: 14pt !important;
 *   }
 *
 *   body.chatzilla-body {
 *     background: green !important;
 *   }
 *
 * Close your browser and restart.  When you bring up ChatZilla, it should have
 * a 14pt font and a green background.
 *
 * To learn how to make more useful changes to the ChatZilla output style, read
 * on.
 *
 * All of the output in the message window is contained in an html <TABLE>.
 * New messages are composed of <TR> and <TD> elements inside this <TABLE>.
 * The message table and it's children have the following CSS classes assigned
 * to them:
 *
 *  + .msg-table is used as the class for the surrounding <TABLE>.
 *    Styles applied to this class will affect all parts of all messages.
 *
 *  + .msg-nested-table  is used as the class for the surrounding <TABLE> for
 *     messages sent from users with long nicknames.  A new table is created, and
 *     nested inside a <TR colspan="2"> of the .msg-table.  The rows of this
 *     table have their classes set as if they were direct children of the 
 *     .msg-table.  Placing messages from users with long nicknames in a nested
 *      table keeps the nickname column from getting too wide.
 *
 *  + .msg is used as the class for the surrounding <TR>.  This means that
 *    any styles applied here will affect the entire message.
 *
 *  + .msg-timestamp is used as the class for the <TD> that has all the time
 *    information on it. Styles on this class will affect the time stamps
 *    against messages (but not the format of the time).
 *
 *  + .msg-type is used as the class for the <TD> surrounding the message type
 *    portion of messages.  Styles applied here will only affect message
 *    types.  ie. "-->|", or "[HELP]".
 *
 *  + .msg-user is used as the class for the <TD> surrounding the nickname
 *    portion of messages.  ChatZilla makes use of the :before and :after
 *    pseudoclasses to decorate nicknames with different characters depending
 *    on their message type.  For example, when a user performs a /me, their
 *    nickname may be surrounded by asterisks.
 *
 *  + .msg-data is used as the class for the <TD> surrounding the actual text
 *    of the message.
 *
 * In addition to CSS class properties, portions of a message may have one
 * or mode of the following attributes set:
 *
 *   + view-type is the type of view the message is contained in.  The types
 *     are:
 *          "IRCClient" for the *client* view
 *          "IRCNetwork" for network and server views
 *          "IRCChannel" for channel views
 *          "IRCUser" for query views
 *
 *   + msg-type is the message type described above.  There are too many types
 *     to list here.  Turn on debug messages to force message types to print
 *     in the left column of the output.
 *
 *   + msg-user is the nickname (in lowercase) of the nickname who sent the
 *     message.  If you sent the message, msg-user will be set to "ME!", so
 *     that you can style your messages regardless of your nickname.
 *
 *   + msg-dest is the name of the object that the message is directed to.  It
 *     could be a channel name, or a nickname (both in lowercase.)
 *  
 *   + dest-type is the type of object the message is directed to.  The types
 *     are:
 *          "IRCChannel" for messages sent to a channel.
 *          "IRCUser" for messages sent directly to another user, including
 *           private messages that appear in a network or channel view (when
 *           a dedicated query view does not exist.)
 *
 *   + mark is either the text "even" or "odd".  When the first user speaks on 
 *     a channel, that message is marked as "even".  Messages will continue to
 *     be marked "even" until a different user speaks, when the mark switches
 *     to "odd".  Each view maintains it's own mark state.  An example of how
 *     ChatZilla marks messages would be:
 *
 *            EVEN:   <moe> this deep fat fry-o-later is great.
 *            EVEN:   <moe> It'll deep fat fry a whole buffalo in 30 seconds.
 *             ODD: <homer> but I'm hungry *now*!
 *
 *   + important is either the text "true", or it is not set at all.  If
 *     important is true, then the message triggered ChatZilla /stalk function.
 *     This occurs when someone with a nickname matching a pattern in your
 *     /stalk list speaks, when someone says a word that matches a pattern in
 *     your /stalk list, or when someone says your nickname.
 *
 * 
 */

/******************************************************************************
 * basic classes                                                              *
 ******************************************************************************/

body.chatzilla-body {               /* The topmost container in the ChatZilla */
    margin: 0px 0px 0px 0px;        /* output window. */
}

/* links */
a.chatzilla-link {
    text-decoration: none;
    direction: ltr;
    unicode-bidi: embed;
}

/* link hover effect */
a.chatzilla-link:hover {
    text-decoration: underline;
}

/* basic styles */
.chatzilla-highlight[name="Large"] {
    font-size: larger;
}

.chatzilla-highlight[name="Small"] {
    font-size: smaller;
}

.chatzilla-highlight[name="Bold text"],
.chatzilla-bold {
    font-weight: bold;
}

.chatzilla-italic {
    font-style: italic;
}

.chatzilla-underline {
    text-decoration: underline;
}

.chatzilla-strikethrough {
    text-decoration: line-through;
}

.chatzilla-teletype {
    font-family: monospace;
}

.chatzilla-rheet {
    font-weight: bold;
}

/* mirc colors */
.chatzilla-fg00 {
    color: #000000;
}

.chatzilla-fg01 {
    color: #c8c8c8;
}

.chatzilla-fg02 {
    color: #0000c8;
}

.chatzilla-fg03 {
    color: #00c800;
}

.chatzilla-fg04 {
    color: #c80000;
}

.chatzilla-fg05 {
    color: #c8c800;
}

.chatzilla-fg06 {
    color: #c800c8;
}

.chatzilla-fg07 {
    color: #ffb000;
}

.chatzilla-fg08 {
    color: #ffff00;
}

.chatzilla-fg09 {
    color: #00ff00;
}

.chatzilla-fg10 {
    color: #00c8c8;
}

.chatzilla-fg11 {
    color: #00ffff;
}

.chatzilla-fg12 {
    color: #0000ff;
}

.chatzilla-fg13 {
    color: #ff00ff;
}

.chatzilla-fg14 {
    color: #808080;
}

.chatzilla-fg15 {
    color: #989898;
}

.chatzilla-bg00 {
    background: #000000;
}

.chatzilla-bg01 {
    background: #c8c8c8;
}

.chatzilla-bg02 {
    background: #0000c8;
}

.chatzilla-bg03 {
    background: #00c800;
}

.chatzilla-bg04 {
    background: #c80000;
}

.chatzilla-bg05 {
    background: #c8c800;
}

.chatzilla-bg06 {
    background: #c800c8;
}

.chatzilla-bg07 {
    background: #ffb000;
}

.chatzilla-bg08 {
    background: #ffff00;
}

.chatzilla-bg09 {
    background: #00ff00;
}

.chatzilla-bg10 {
    background: #00c8c8;
}

.chatzilla-bg11 {
    background: #00ffff;
}

.chatzilla-bg12 {
    background: #0000ff;
}

.chatzilla-bg13 {
    background: #ff00ff;
}

.chatzilla-bg14 {
    background: #808080;
}

.chatzilla-bg15 {
    background: #989898;
}

.chatzilla-control-char:before {
    content: "[\\";
}

.chatzilla-control-char:after {
    content: "]";
}

/* smiley faces */
.chatzilla-emote-txt {              /* emoticon text inside                    */
    display: none;
}

.chatzilla-emote:after {            /* empty span to attach :after images to   */
    margin-left: 3px;
    margin-right: 3px;
    content: url(chrome://chatzilla/skin/images/face-question.png);
}

.chatzilla-emote[type="face-alien"]:after {
    content: url(chrome://chatzilla/skin/images/face-alien.png);
}

.chatzilla-emote[type="face-angry"]:after {
    content: url(chrome://chatzilla/skin/images/face-angry.png);
}

.chatzilla-emote[type="face-arrow"]:after {
    content: url(chrome://chatzilla/skin/images/face-arrow.png);
}

.chatzilla-emote[type="face-cry"]:after {
    content: url(chrome://chatzilla/skin/images/face-cry.png);
}

.chatzilla-emote[type="face-confused"]:after {
    content: url(chrome://chatzilla/skin/images/face-confused.png);
}

.chatzilla-emote[type="face-cool"]:after {
    content: url(chrome://chatzilla/skin/images/face-cool.png);
}

.chatzilla-emote[type="face-dizzy"]:after {
    content: url(chrome://chatzilla/skin/images/face-dizzy.png);
}

.chatzilla-emote[type="face-dizzy-back"]:after {
    content: url(chrome://chatzilla/skin/images/face-dizzy-back.png);
}

.chatzilla-emote[type="face-eek"]:after {
    content: url(chrome://chatzilla/skin/images/face-eek.png);
}

.chatzilla-emote[type="face-evil"]:after {
    content: url(chrome://chatzilla/skin/images/face-evil.png);
}

.chatzilla-emote[type="face-exclaim"]:after {
    content: url(chrome://chatzilla/skin/images/face-exclaim.png);
}

.chatzilla-emote[type="face-idea"]:after {
    content: url(chrome://chatzilla/skin/images/face-idea.png);
}

.chatzilla-emote[type="face-laugh"]:after {
    content: url(chrome://chatzilla/skin/images/face-laugh.png);
}

.chatzilla-emote[type="face-lol"]:after {
    content: url(chrome://chatzilla/skin/images/face-lol.png);
}

.chatzilla-emote[type="face-mrgreen"]:after {
    content: url(chrome://chatzilla/skin/images/face-mrgreen.png);
}

.chatzilla-emote[type="face-normal"]:after {
    content: url(chrome://chatzilla/skin/images/face-normal.png);
}

.chatzilla-emote[type="face-question"]:after {
    content: url(chrome://chatzilla/skin/images/face-question.png);
}

.chatzilla-emote[type="face-razz"]:after {
    content: url(chrome://chatzilla/skin/images/face-razz.png);
}

.chatzilla-emote[type="face-red"]:after {
    content: url(chrome://chatzilla/skin/images/face-red.png);
}

.chatzilla-emote[type="face-rofl"]:after {
    content: url(chrome://chatzilla/skin/images/face-rofl.png);
}

.chatzilla-emote[type="face-rolleyes"]:after {
    content: url(chrome://chatzilla/skin/images/face-rolleyes.png);
}

.chatzilla-emote[type="face-sad"]:after {
    content: url(chrome://chatzilla/skin/images/face-sad.png);
}

.chatzilla-emote[type="face-smile"]:after {
    content: url(chrome://chatzilla/skin/images/face-smile.png);
}

.chatzilla-emote[type="face-surprised"]:after {
    content: url(chrome://chatzilla/skin/images/face-surprised.png);
}

.chatzilla-emote[type="face-tongue"]:after {
    content: url(chrome://chatzilla/skin/images/face-tongue.png);
}

.chatzilla-emote[type="face-wink"]:after {
    content: url(chrome://chatzilla/skin/images/face-wink.png);
}

/******************************************************************************
 * message class base definitions                                             *
 ******************************************************************************/

.msg-table {                                /* <TABLE> containing all of the  */
    width: 100%;                            /* messages.                      */
}

.msg-nested-table {                         /* <TABLE> nested inside          */
    width: 100%;                            /* .msg-table for users with long */
    margin: 0px;                            /* nicknames.                     */
    border: 0px;
    border-spacing: 0px;
    padding: 0px;
}

.msg {                                      /* .msg = a single message in the */
    width: 100%;                            /* output window                  */
}

.msg-timestamp {                            /* .msg-timestamp = timestamp for */
    font-style: normal !important;          /* the message, done using        */
    vertical-align: top;                    /* :before and content.           */
    white-space: nowrap;
}

.msg-type {                                 /* .msg-type = message type       */
    font-variant: small-caps;               /* indicator                      */
    font-size: 90%;
    padding-right: 10px;
    text-align: right;
    vertical-align: top;
    white-space: nowrap;
}

.msg-user {                                 /* msg-user = nickname portion of */
    text-align: right;                      /* a message (channel and query   */
    vertical-align: top;                    /* views)                         */
}

.msg-data {                                 /* .msg-data = the text portion   */
    padding: 1px 1px 1px 3px;               /* of a message                   */
    width: 100%;
    white-space: -moz-pre-wrap;
}


/******************************************************************************
 * message class specific definitions                                         *
 ******************************************************************************/

/* msg-user is the nickname of the person who spoke, or "ME!" if you said it.
 * msg-type is the type of the message, taken from the irc message.  If you 
 * turn on debug messages (options->debug messages), the msg-types will be
 * displayed to the left of the messages for all messages except:
 * PRIVMSG: when a user sends you, or a channel you are on a message.
 * ACTION: when a user performs a /me.
 * NOTIFY: when a server or user sends you a notification.
 */
.msg[msg-user="|"] .msg-data,                /* messages from common "bulk    */
.msg[msg-user="||"] .msg-data,               /* paste" nicks                  */
.msg[msg-user="|||"] .msg-data,
.msg[msg-user="]"] .msg-data,
.msg[msg-user="["] .msg-data,
.msg[msg-type="372"] .msg-data,              /* MOTD                          */
.msg[msg-type="EVAL-IN"] .msg-data,          /* /eval results                 */
.msg[msg-type="EVAL-OUT"] .msg-data {
    font-size: 90%;
    font-family: monospace;
}

.msg[msg-type="USAGE"] .msg-data {
    font-style: italic;
}

.msg[msg-type="HELP"] .msg-data {
    font-weight: normal;
}

.msg[msg-type="ACTION"] .msg-user {
    font-style: italic;
}

.msg[important="true"] .msg-user {
    font-weight: bold;
}

/******************************************************************************
 * nickname decorations                                                       *
 ******************************************************************************/

/* :before and :after pseudoclasses form the decorations around nicknames */
.msg-user:before {
    content: "<";
}
.msg-user:after {
    content: ">";
}
.msg[important="true"] .msg-user:before {
    font-weight: bold;
}
.msg[important="true"] .msg-user:after {
    font-weight: bold;
}
.msg[msg-user$="ME!"] .msg-user:before {
    content: "<";
}
.msg[msg-user$="ME!"] .msg-user:after {
    content: ">";
}
.msg[msg-type="ACTION"] .msg-user:before,
.msg[msg-type="ACTION"] .msg-user:after {
    content: "";
}
.msg[msg-type="NOTICE"] .msg-user:before {
    content: "[";
}
.msg[msg-type="NOTICE"] .msg-user:after {
    content: "]";
}

/* private messages *not* in a query window */
.msg[dest-type="IRCUser"] .msg-user:before {
    content: "to(";
}
.msg[dest-type="IRCUser"][msg-dest$="ME!"] .msg-user:before {
    content: "from(";
}
.msg[dest-type="IRCUser"] .msg-user:after {
    content: ")";
}

/* private messages in a query window */
.msg[view-type="IRCUser"] .msg-user:before {
    content: "{";
}
.msg[view-type="IRCUser"] .msg-user:after {
    content: "}";
}
.msg[view-type="IRCUser"][msg-dest$="ME!"] .msg-user:before {
    content: "{";
}
.msg[view-type="IRCUser"][msg-dest$="ME!"] .msg-user:after {
    content: "}";
}