Revision control
Copy as Markdown
Other Tools
/* -*- Mode: Text; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 4 -*-
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
/*
* 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 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;
* }
*
* .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.
*/
#splash-wrapper {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
overflow: hidden;
}
/******************************************************************************
* basic classes *
******************************************************************************/
.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;
}
/* line marker */
.chatzilla-line-marker {
box-shadow: 0px 2px black;
}
/* basic styles */
.chatzilla-highlight[name="Large"] {
font-size: larger;
}
.chatzilla-highlight[name="Small"] {
font-size: smaller;
}
.chatzilla-highlight[name="Bold text"],
.chatzilla-bold, a.chatzilla-bold.chatzilla-link {
font-weight: bold;
}
.chatzilla-italic {
font-style: italic;
}
/* In CSS, text-decoration is a list of decorations to apply to the text.
* However, as it is just one property, there is no way to apply it additively;
* instead, we're forced to have all the 7 combinations (of 8 - one is none).
*/
.chatzilla-overline {
text-decoration: overline;
}
.chatzilla-strikethrough {
text-decoration: line-through;
}
.chatzilla-underline,
a.chatzilla-underline.chatzilla-link {
text-decoration: underline;
}
.chatzilla-overline.chatzilla-strikethrough {
text-decoration: overline line-through;
}
.chatzilla-overline.chatzilla-underline,
a.chatzilla-overline.chatzilla-underline.chatzilla-link {
text-decoration: overline underline;
}
.chatzilla-strikethrough.chatzilla-underline,
a.chatzilla-strikethrough.chatzilla-underline.chatzilla-link {
text-decoration: line-through underline;
}
.chatzilla-overline.chatzilla-strikethrough.chatzilla-underline,
a.chatzilla-overline.chatzilla-strikethrough.chatzilla-underline.chatzilla-link {
text-decoration: overline line-through underline;
}
.chatzilla-teletype {
font-family: monospace;
}
.chatzilla-rheet {
font-weight: bold;
}
.chatzilla-decor {
display: none;
}
/* mirc colors */
.chatzilla-fg00, a.chatzilla-fg00.chatzilla-link {
color: #FFFFFF;
}
.chatzilla-fg01, a.chatzilla-fg01.chatzilla-link {
color: #000000;
}
.chatzilla-fg02, a.chatzilla-fg02.chatzilla-link {
color: #00007F;
}
.chatzilla-fg03, a.chatzilla-fg03.chatzilla-link {
color: #009300;
}
.chatzilla-fg04, a.chatzilla-fg04.chatzilla-link {
color: #FF0000;
}
.chatzilla-fg05, a.chatzilla-fg05.chatzilla-link {
color: #7F0000;
}
.chatzilla-fg06, a.chatzilla-fg06.chatzilla-link {
color: #9C009C;
}
.chatzilla-fg07, a.chatzilla-fg07.chatzilla-link {
color: #FC7F00;
}
.chatzilla-fg08, a.chatzilla-fg08.chatzilla-link {
color: #FFFF00;
}
.chatzilla-fg09, a.chatzilla-fg09.chatzilla-link {
color: #00FC00;
}
.chatzilla-fg10, a.chatzilla-fg10.chatzilla-link {
color: #009393;
}
.chatzilla-fg11, a.chatzilla-fg11.chatzilla-link {
color: #00FFFF;
}
.chatzilla-fg12, a.chatzilla-fg12.chatzilla-link {
color: #0000FC;
}
.chatzilla-fg13, a.chatzilla-fg13.chatzilla-link {
color: #FF00FF;
}
.chatzilla-fg14, a.chatzilla-fg14.chatzilla-link {
color: #7F7F7F;
}
.chatzilla-fg15, a.chatzilla-fg15.chatzilla-link {
color: #D2D2D2;
}
.chatzilla-bg00, a.chatzilla-bg00.chatzilla-link {
background-color: #FFFFFF;
}
.chatzilla-bg01, a.chatzilla-bg01.chatzilla-link {
background-color: #000000;
}
.chatzilla-bg02, a.chatzilla-bg02.chatzilla-link {
background-color: #00007F;
}
.chatzilla-bg03, a.chatzilla-bg03.chatzilla-link {
background-color: #009300;
}
.chatzilla-bg04, a.chatzilla-bg04.chatzilla-link {
background-color: #FF0000;
}
.chatzilla-bg05, a.chatzilla-bg05.chatzilla-link {
background-color: #7F0000;
}
.chatzilla-bg06, a.chatzilla-bg06.chatzilla-link {
background-color: #9C009C;
}
.chatzilla-bg07, a.chatzilla-bg07.chatzilla-link {
background-color: #FC7F00;
}
.chatzilla-bg08, a.chatzilla-bg08.chatzilla-link {
background-color: #FFFF00;
}
.chatzilla-bg09, a.chatzilla-bg09.chatzilla-link {
background-color: #00FC00;
}
.chatzilla-bg10, a.chatzilla-bg10.chatzilla-link {
background-color: #009393;
}
.chatzilla-bg11, a.chatzilla-bg11.chatzilla-link {
background-color: #00FFFF;
}
.chatzilla-bg12, a.chatzilla-bg12.chatzilla-link {
background-color: #0000FC;
}
.chatzilla-bg13, a.chatzilla-bg13.chatzilla-link {
background-color: #FF00FF;
}
.chatzilla-bg14, a.chatzilla-bg14.chatzilla-link {
background-color: #7F7F7F;
}
.chatzilla-bg15, a.chatzilla-bg15.chatzilla-link {
background-color: #D2D2D2;
}
.chatzilla-control-char:before {
content: "[\\";
}
.chatzilla-control-char:after {
content: "]";
}
/* smiley faces */
.chatzilla-emote-txt { /* emoticon text inside */
font-size: larger;
}
/******************************************************************************
* 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) */
white-space: nowrap;
}
.msg-data { /* .msg-data = the text portion */
padding: 1px 1px 1px 3px; /* of a message */
width: 100%;
white-space: 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 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: "}";
}
/* messages 'to' or 'from' somewhere other than where displayed */
.msg[to-other] .msg-user:before {
content: "to(";
}
.msg[from-other] .msg-user:before {
content: "from(";
}
.msg[to-other] .msg-user:after,
.msg[from-other] .msg-user:after {
content: ")";
}