290 lines
4.2 KiB
CSS
290 lines
4.2 KiB
CSS
/*
|
|
'Efficient' style for KMess.
|
|
Copyright (C) 2006, Diederik van der Boor
|
|
Copyright (c) 2005, Cies Breijs
|
|
|
|
Design based on 'Efficient' by Cies Breijs
|
|
http://www.kde-look.org/content/show.php?content=26318
|
|
|
|
This program is free software; you can redistribute it and/or
|
|
modify it under the terms of the GNU General Public License
|
|
as published by the Free Software Foundation; either version 2
|
|
of the License, or (at your option) any later version.
|
|
|
|
This program is distributed in the hope that it will be useful,
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
GNU General Public License for more details.
|
|
|
|
You should have received a copy of the GNU General Public License
|
|
along with this program; if not, write to the Free Software
|
|
Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA
|
|
*/
|
|
|
|
|
|
|
|
/*
|
|
* the incoming and outgoing messages are implemented as definition-list (<dl>).
|
|
* each message type has a different background/border color.
|
|
*
|
|
* the header is added to the <dt> tag, the message body to the <dd> tag.
|
|
* this is easy to format with css, and easy to read without css markup.
|
|
*/
|
|
|
|
|
|
/*
|
|
* reset some default margins
|
|
*/
|
|
dl
|
|
{
|
|
margin: 0 0 2px 0; /* set margin bottom */
|
|
}
|
|
|
|
dt, dd
|
|
{
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
* message colors.
|
|
*/
|
|
.incoming dl
|
|
{
|
|
background-color: #F7F3F3;
|
|
}
|
|
|
|
.outgoing dl
|
|
{
|
|
background-color: #F4F4FB;
|
|
}
|
|
|
|
.offlineIncoming dl
|
|
{
|
|
background-color: #FFFBFB;
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
* message title colors
|
|
*/
|
|
.incoming dt
|
|
{
|
|
color: #A82F2F;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.outgoing dt
|
|
{
|
|
color: #16569E;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.offlineIncoming dt
|
|
{
|
|
color: #C83838;
|
|
font-weight: bold;
|
|
}
|
|
|
|
|
|
|
|
|
|
/*
|
|
* column effect
|
|
*/
|
|
.incoming dt,
|
|
.outgoing dt,
|
|
.offlineIncoming dt
|
|
{
|
|
float: left;
|
|
min-width: 7em;
|
|
|
|
/* to enforce a fixed width:
|
|
width: 7em;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
*/
|
|
}
|
|
|
|
.rtl .incoming dt,
|
|
.rtl .outgoing dt,
|
|
.rtl .offlineIncoming dt
|
|
{
|
|
/* reverse for right-to-left */
|
|
float: right;
|
|
}
|
|
|
|
.incoming dd,
|
|
.outgoing dd,
|
|
.offlineIncoming dd
|
|
{
|
|
/* for alignment of lines under the float
|
|
using padding instead of margin to the messagegroup border also appears below the name */
|
|
padding-left: 7em;
|
|
}
|
|
|
|
.rtl .incoming dd,
|
|
.rtl .outgoing dd,
|
|
.rtl .offlineIncoming dd
|
|
{
|
|
padding-left: 0;
|
|
padding-right: 7em;
|
|
}
|
|
|
|
dl
|
|
{
|
|
position: relative;
|
|
/* new messages should appear below the float */
|
|
clear: both;
|
|
}
|
|
|
|
|
|
div.application,
|
|
div.notification,
|
|
div.presence,
|
|
div.system
|
|
{
|
|
margin-left: 7em;
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
* name in message title.
|
|
*/
|
|
dt span.name
|
|
{
|
|
display: block;
|
|
text-align: right;
|
|
|
|
padding-left: 3px;
|
|
padding-right: 3px;
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
* time in message title and other messages.
|
|
*/
|
|
span.time
|
|
{
|
|
float: right;
|
|
display: inline; /* typically for MSIE bugs */
|
|
color: #AAAAAA;
|
|
font-size: 6pt;
|
|
|
|
/* some margins to fix most ugly stuff when resizing */
|
|
margin-left: 5px;
|
|
margin-bottom: 1ex;
|
|
}
|
|
|
|
.rtl span.time
|
|
{
|
|
float: left;
|
|
margin-left: 0;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
|
|
/*
|
|
* grouped messages splitter effect
|
|
*/
|
|
.messagegroup dd.first-child,
|
|
.messagegroup dd.middle-child
|
|
{
|
|
border-bottom: 2px dotted white;
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
* other messages;
|
|
* - application message (e.g. invitation)
|
|
* - notification message (e.g. file transfer complete)
|
|
* - system message (e.g. error, invitation not supported)
|
|
*/
|
|
div.application
|
|
{
|
|
color: blue;
|
|
}
|
|
|
|
div.presence
|
|
{
|
|
color: gray;
|
|
}
|
|
|
|
div.notification
|
|
{
|
|
color: purple;
|
|
}
|
|
|
|
div.system
|
|
{
|
|
color: red;
|
|
}
|
|
|
|
span.filename {
|
|
color: blue;
|
|
}
|
|
|
|
span.failedFilename,
|
|
div.notification .filename {
|
|
color: red;
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
* Draw a border arround emoticon placeholders.
|
|
*/
|
|
img.customEmoticonPlaceholder
|
|
{
|
|
border: 1px dotted #ccc;
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
* fix alignment of emoticons
|
|
*/
|
|
img.standardEmoticon,
|
|
img.customEmoticon,
|
|
img.customEmoticonPlaceholder
|
|
{
|
|
vertical-align: top;
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
* Separator for the various chats within HTML files
|
|
*/
|
|
div.conversation
|
|
{
|
|
padding: 0;
|
|
margin-left: 6em;
|
|
margin-top: 3em;
|
|
margin-bottom: 1.5em;
|
|
font-size: larger;
|
|
color: purple;
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
* Style overrides for chat history messages
|
|
*/
|
|
.history {
|
|
margin-bottom: 3em;
|
|
}
|
|
.history * {
|
|
color: #444;
|
|
background-color: transparent;
|
|
border: 0;
|
|
}
|
|
|
|
|