diff options
Diffstat (limited to '')
| -rw-r--r-- | comm/suite/chatzilla/xul/content/output-base.css | 528 |
1 files changed, 528 insertions, 0 deletions
diff --git a/comm/suite/chatzilla/xul/content/output-base.css b/comm/suite/chatzilla/xul/content/output-base.css new file mode 100644 index 0000000000..bdf9db3f2f --- /dev/null +++ b/comm/suite/chatzilla/xul/content/output-base.css @@ -0,0 +1,528 @@ +/* -*- 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 + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* + * 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: ")"; +} |