kmess/data/chatstyles/Pure/Pure.css

/*
  'Pure' style for KMess.
  Copyright (C) 2006, Diederik van der Boor
  Copyright (c) 2004, Francois Chazal

  Design based on 'Pure' by Francois Chazal
  http://www.kde-look.org/content/show.php?content=23473

  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.
 */

dl
{
  margin: 0 0 16px 0; /* margin bottom is 16px */
}



/*
 * message title. each child element of the title
 * add a different part of the background and images.
 * span.time is also given a background-color so
 * it can overlap long names without having ugly text.
 */

dt
{
  margin:  0;
  padding: 0;
  background-image:    url(corner-tl.png); /* left corner part */
  background-position: top left;
  background-repeat:   no-repeat;
}

.incoming dt,
.incoming dt span.time
{
  background-color: #c9d9f0;
  color:            #567199;
}

.outgoing dt,
.outgoing dt span.time
{
  background-color: #e1e1e1;
  color:            #707070;
}

.offlineIncoming dt,
.offlineIncoming dt span.time
{
  background-color: #CFE0F7;
  color:            #6787B7;
}

dt span.wrapper
{
  display:       block;
  height:        20px;
  padding:       2px;
  font-weight:   bold;
  font-size:     10px;
  background-image:    url(corner-tr.png); /* right corner part */
  background-position: top right;
  background-repeat:   no-repeat;
  position:            relative;  /* starting-point for absolute position below */
}



/*
 * name in the message title.
 * adds a small icon to the left.
 */

dt span.name
{
  padding:     0 20px 0 20px;  /* right and left padding */
  line-height: 20px;
  background-position: center left;
  background-repeat:   no-repeat;
  white-space: nowrap;  /* avoid overlapping message text */
  vertical-align: top;  /* makes it better in mozilla */
  z-index: 1;
}

.incoming dt span.name,
.offlineIncoming dt span.name
{
  background-image: url(contact.png);
}

.outgoing dt span.name
{
  background-image: url(myself.png);
}

dt.rtl span.name
{
  /* reverse for right-to-left names */
  background-position: center right;
}



/*
 * time in message title.
 * adds a time icon to the right.
 */
dt span.time
{
  /* align right, no float to avoid elements falling below. */
  position:    absolute;
  right:       2px;

  /* set background, give padding so text does not overlap it */
  line-height: 20px;
  padding-left:  5px;
  padding-right: 20px;
  background-image:    url(clock.png);
  background-position: right center;
  background-repeat:   no-repeat;
}

dt.rtl span.time
{
  /* reverse for right-to-left names */
  position:      absolute;
  left:          2px;
  right:         auto;
  padding-left:  20px;
  padding-right: 5px;
  background-position: left center;
}



/*
 * message body.
 * add some spacing, color and the bottom line.
 */
dd
{
  margin:  0;
  padding: 5px;
}

.incoming dd
{
  background-color: #f5f6fa;
  border-bottom:    2px solid #c9d9f0;
}

.outgoing dd
{
  background-color: #f9f9f9;
  border-bottom:    2px solid #e1e1e1;
}

.offlineIncoming dd
{
  background-color: #F7F8FC;
  border-bottom:    2px solid #c9d9f0;
}



/*
 * message footer.
 * the bottom part is added to the main dl object.
 */

.incoming dl,
.offlineIncoming dl
{
  background-image:    url(corner-br.png);
  background-repeat:   no-repeat;
  background-position: bottom right;
  padding-bottom: 7px;
}

.outgoing dl
{
  background-image:    url(corner-bl.png);
  background-repeat:   no-repeat;
  background-position: bottom left;
  padding-bottom: 7px;
}



/*
 * grouped messages
 */
.messagegroup .incoming dd,
.messagegroup .offlineIncoming dd
{
  padding-left:        10px;
  background-image:    url(arrow0.png);
  background-position: 0 0.9em;
  background-repeat:   no-repeat;
  /*
  display: list-item;
  list-style-image: url(arrow0.png);
  list-style-position: inside;
  marker-offset: 0;
  */
}

.messagegroup .outgoing dd
{
  padding-left:        10px;
  background-image:    url(arrow1.png);
  background-position: 0 0.9em;
  background-repeat:   no-repeat;
}

.messagegroup dd.first-child,
.messagegroup dd.middle-child
{
  border: 0;  /* no repeated border for first and middle items */
}



/*
 * other messages;
 * - application message (e.g. invitation)
 * - notification message (e.g. file transfer complete)
 * - system message (e.g. error, invitation not supported)
 */
div.application,
div.notification,
div.system
{
  margin: 10px 0 10px; /* top and bottom margin */
}

div.application
{
  color: blue;
}

div.notification
{
  color: purple;
}

div.system
{
  color:         red;
  padding:       3px 0;
  border-top:    1px solid red;
  border-bottom: 1px solid 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: 10px;
}



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