kmess/data/chatstyles/Fresh/Fresh.css

/*
  'Fresh' style for KMess.
  Copyright (C) 2006, Diederik van der Boor
  Copyright (c) 2006, Benjamin Deveze

  Design based on 'Fresh' by Benjamin Deveze
  http://www.kde-look.org/content/show.php?content=43099

  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, dt, dd
{
  margin:  0;
  padding: 0;
}


/*
 * make sure position: absolute stays in the message (for time).
 */
.incoming,
.outgoing,
.offlineIncoming
{
  position: relative;
}

/*
 * general message layout and colors.
 */
.outgoing
{
  background-color: #edf2ff;
  border-top:       1px solid #dce6ff;
  border-bottom:    1px solid #dce6ff;
}

.avatar
{
  background-image:  url("bg_gravatar.gif");
  background-repeat: no-repeat;
  float:    left;
  margin:   10px;
  width:    93px;
  height:   70px;
  overflow: hidden;
  /* instead of padding, use margin on img to align it.
     makes the computation of width and height easier */
}

.rtl .avatar
{
  float: right;
  background-image: url("bg_gravatar_rtl.gif");
}

.avatar img
{
  margin-left: 11px;
  margin-top:  11px;
  height: 48px;
  width:  48px;
  /* omitting the width auto scales, but it becomes ugly */
}

.rtl .avatar img
{
  margin-left: 34px;
}

.incoming,
.outgoing,
.offlineIncoming
{
  margin-top:    4px;
  margin-bottom: 4px;
  /* new messages should appear below the float */
  clear: both;
}

.incoming dl,
.outgoing dl,
.offlineIncoming dl
{
  /* for alignment of lines under the float */
  margin-left: 113px;  /* avatar width + margin */
  margin-top:  11px;
  padding-bottom: 0.7em;
}

div.application,
div.notification,
div.presence,
div.system
{
  margin-left:   11px;
  margin-top:    0.7em;
  margin-bottom: 0.7em;  /* no padding, so time also gets margin */
  position:    relative; /* for time */
}



/*
 * name in message title.
 */
dt span.name
{
  display:       block;
  color:         #030612;
  font-weight:   bold;
  margin-bottom: 0.3em;
  margin-right:  2px;
}

.offlineIncoming dt span.name
{
  color: #485770;
}



/*
 * time in message title and other messages.
 */
span.time
{
  position: absolute;
  right:    5px;
  bottom:   0;
  color:       #2f63b3;
  font-size:   8pt;

  /* some margins to fix most ugly stuff when resizing */
  margin-left:   5px;
  margin-bottom: 0;
}

.rtl span.time
{
  /* reverse for right-to-left */
  position: absolute;
  left:     5px;
  right:    auto;
  margin-left:  0;
  margin-right: 5px;
}



/*
 * message body.
 * reset spacing and default indent of dd element.
 */
dd
{
  margin:  0;
  padding: 0;
}

dd div.messageContent
{
  /* avoid overlapping the time field */
  padding-right: 5em;
}



/*
 * grouped messages splitter effect
 */
.messagegroup dd.middle-child,
.messagegroup dd.last-child
{
  margin-top:  0.4em;
  padding-top: 0.4em;
  border-top:  1px solid #dce6ff;
}

.messagegroup dd.last-child
{
  padding-bottom: 5px;
}

.messagegroup dd
{
  position: relative; /* startpoint for absolute positions */
}



/*
 * 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;
}



/*
 * Set the standard body margins.
 * The extra #ChatMessageView prefix is needed to overrule
 * the inline rule added by the chat window.
 */
#ChatMessageView body
{
  padding: 0;
}



/*
 * Separator for the various chats within HTML files
 */
div.conversation
{
  margin: 3em 2em 2em 2em;
  padding: 0.5em;
  border: 1px solid #dce6ff;
  font-size: larger;
  color: purple;
  text-align: center;
}


/*
 * Style overrides for chat history messages
 */
.history {
  margin-bottom: 3em;
}
.history * {
  color: #444;
  background-color: transparent;
  border: 0;
}

.history .avatar
{
  background-image:  url("bg_gravatar_gray.gif");
}

.history .rtl .avatar
{
  background-image: url("bg_gravatar_gray_rtl.gif");
}