mirror of
https://github.com/rn10950/RetroZilla.git
synced 2024-07-08 02:10:14 +02:00
630 lines
18 KiB
CSS
630 lines
18 KiB
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. */
|
|
background: #FFFFFF;
|
|
color: #000000;
|
|
}
|
|
|
|
a:link {
|
|
color: #0000EE;
|
|
}
|
|
a:active {
|
|
color: #EE0000;
|
|
}
|
|
a:visited {
|
|
color: #551A8B;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
.chatzilla-decor {
|
|
display: none;
|
|
}
|
|
|
|
/* mirc colors */
|
|
.chatzilla-fg00 {
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.chatzilla-fg01 {
|
|
color: #000000;
|
|
}
|
|
|
|
.chatzilla-fg02 {
|
|
color: #00007F;
|
|
}
|
|
|
|
.chatzilla-fg03 {
|
|
color: #009300;
|
|
}
|
|
|
|
.chatzilla-fg04 {
|
|
color: #FF0000;
|
|
}
|
|
|
|
.chatzilla-fg05 {
|
|
color: #7F0000;
|
|
}
|
|
|
|
.chatzilla-fg06 {
|
|
color: #9C009C;
|
|
}
|
|
|
|
.chatzilla-fg07 {
|
|
color: #FC7F00;
|
|
}
|
|
|
|
.chatzilla-fg08 {
|
|
color: #FFFF00;
|
|
}
|
|
|
|
.chatzilla-fg09 {
|
|
color: #00FC00;
|
|
}
|
|
|
|
.chatzilla-fg10 {
|
|
color: #009393;
|
|
}
|
|
|
|
.chatzilla-fg11 {
|
|
color: #00FFFF;
|
|
}
|
|
|
|
.chatzilla-fg12 {
|
|
color: #0000FC;
|
|
}
|
|
|
|
.chatzilla-fg13 {
|
|
color: #FF00FF;
|
|
}
|
|
|
|
.chatzilla-fg14 {
|
|
color: #7F7F7F;
|
|
}
|
|
|
|
.chatzilla-fg15 {
|
|
color: #D2D2D2;
|
|
}
|
|
|
|
.chatzilla-bg00 {
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
.chatzilla-bg01 {
|
|
background-color: #000000;
|
|
}
|
|
|
|
.chatzilla-bg02 {
|
|
background-color: #00007F;
|
|
}
|
|
|
|
.chatzilla-bg03 {
|
|
background-color: #009300;
|
|
}
|
|
|
|
.chatzilla-bg04 {
|
|
background-color: #FF0000;
|
|
}
|
|
|
|
.chatzilla-bg05 {
|
|
background-color: #7F0000;
|
|
}
|
|
|
|
.chatzilla-bg06 {
|
|
background-color: #9C009C;
|
|
}
|
|
|
|
.chatzilla-bg07 {
|
|
background-color: #FC7F00;
|
|
}
|
|
|
|
.chatzilla-bg08 {
|
|
background-color: #FFFF00;
|
|
}
|
|
|
|
.chatzilla-bg09 {
|
|
background-color: #00FC00;
|
|
}
|
|
|
|
.chatzilla-bg10 {
|
|
background-color: #009393;
|
|
}
|
|
|
|
.chatzilla-bg11 {
|
|
background-color: #00FFFF;
|
|
}
|
|
|
|
.chatzilla-bg12 {
|
|
background-color: #0000FC;
|
|
}
|
|
|
|
.chatzilla-bg13 {
|
|
background-color: #FF00FF;
|
|
}
|
|
|
|
.chatzilla-bg14 {
|
|
background-color: #7F7F7F;
|
|
}
|
|
|
|
.chatzilla-bg15 {
|
|
background-color: #D2D2D2;
|
|
}
|
|
|
|
.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: "}";
|
|
}
|