Source

adium-xtras / Squader.AdiumMessageStyle / Contents / Resources / main.sass

$width-nick: 95px

$color: rgba(57, 58, 57, 1.0)
$color-light: rgba(230, 230, 230, 1.0)
$color-lighter: rgba(50, 50, 50, 0.05)
$color-history: fade_out($color, 0.1)

$color-blue: rgba(76, 109, 132, 1.0)
// $color-blue-light: rgba(212, 233, 248, 1.0)
$color-blueish: rgba(84, 187, 206, 1.0)
$color-green: rgba(87, 119, 74, 1.0)
// $color-green-light: rgba(222, 248, 212, 1.0)
$color-purple: rgba(155, 81, 155, 1.0)
$color-orangeish: rgba(232, 151, 123, 1.0)
$color-red: rgba(196, 77, 85, 1.0)
// $color-red-light: rgba(255, 219, 214, 1.0)
$color-redish: rgba(232, 116, 94, 1.0)
$color-yellow: rgba(217, 130, 0, 1.0)
$color-yellowish: rgba(232, 192, 114, 1.0)

$color-in: $color-red
$color-out: $color-blue

$color-away: $color-redish
$color-away-return: $color-blueish
$color-date: $color-blue
$color-error: $color-yellow
$color-event: $color-blue
$color-idle: $color-orangeish
$color-online: $color-green
$color-status: rgb(130, 130, 130)




=clearfix
	overflow: hidden
	zoom: 1


@mixin col-left
	width: $width-nick
	text-align: right
	word-break: break-word
	display: table-cell
	padding-left: 5px
	padding-right: 10px
	


@mixin setup-event($clr, $lighten: 50, $saturate: 40)
	background: saturate(lighten($clr, $lighten), $saturate)
	color: $clr



body
	margin: 4px 0 5px 0
	color: $color
	//background-color: white
	// font-family: "Helvetica Neue", Helvetica, arial, sans-serif
	// font-size: 13px
	padding: 0px 1px 1px 1px


a
	&:visited
		text-decoration: none
		// border-bottom: 1px dashed red


.event,
.message,
.status
	padding: 5px 0
	// margin: 10px 0
	// margin: 5px 0
	
	&.consecutive
		padding-top: 0
		// margin-top: -5px


// .message,
// .status
// 	display: table-row


.message

	&:hover
		.time
			z-index: -10
			color: $color-light
	
	&.consecutive

		.sender
			visibility: hidden

	&.incoming

		a
			color: $color-in

		.sender
			color: $color-in

	&.outgoing
		background: $color-lighter

		a
			color: $color-out
		
		.sender
			color: $color-out

	.content
		word-break: break-word
		display: table-cell
		padding-right: 10px
		
		// :line-break
	
	.sender
		+col-left
		font-weight: bold
	
	.time
		display: block
		position: absolute
		right: 0
		font-weight: bold
		font-size: 1.2em
		color: $color-lighter


.event,
.status
	font-weight: bold
	color: $color-status
	
	&.date_separator
		+setup-event($color-date)

	// &.away,
	// &.idle
	// 	+setup-event($color-away, 30)

	&.date_separator
		+setup-event($color-date)

	&.error
		+setup-event($color-error)

	// &.idle
	// 	// +setup-event($color-idle, 28)
	// 	opacity: 0.5

	&.offline
		+setup-event(complement($color-online))

	&.online
		+setup-event($color-online)

	// &.return_away,
	// &.return_idle
	// 	+setup-event($color-away-return, 35)
	
	// &.return_idle
	// 	// +setup-event(complement($color-idle), 30)
	// 	opacity: 0.5
	
	.content,
	.time
		display: table-cell
	
	.time
		+col-left
		// width: 95px
		// padding-right: 10px
		// text-align: right

.history
	&.incoming
		a
			color: fade-out($color-in, 0.5)

		.sender
			color: fade-out($color-in, 0.5)
	
	&.outgoing
		a
			color: fade-out($color-out, 0.5)

		.sender
			color: fade-out($color-out, 0.5)
	
	.content
		color: fade-out($color, 0.5)