xtras/mathuaerknedam 299:27ddeb54e217: Stockholm: The left margi...

commits at adium.im commits at adium.im
Fri Dec 11 22:51:14 UTC 2009


details:	http://hg.adium.im/xtras/mathuaerknedam/rev/27ddeb54e217
revision:	299:27ddeb54e217
author:		mathuaerknedam
date:		Fri Dec 11 14:46:12 2009 -0600

Stockholm: The left margin of the text was 1px too small.
Subject: xtras/mathuaerknedam 300:e6d78b75b440: Stockholm: Add topic support.

details:	http://hg.adium.im/xtras/mathuaerknedam/rev/e6d78b75b440
revision:	300:e6d78b75b440
author:		mathuaerknedam
date:		Fri Dec 11 14:47:53 2009 -0600

Stockholm: Add topic support.
Subject: xtras/mathuaerknedam 301:72961a2f3474: Stockholm: Add focus styling for status/event messages for all variants.

details:	http://hg.adium.im/xtras/mathuaerknedam/rev/72961a2f3474
revision:	301:72961a2f3474
author:		mathuaerknedam
date:		Fri Dec 11 15:02:22 2009 -0600

Stockholm: Add focus styling for status/event messages for all variants.
Subject: xtras/mathuaerknedam 302:a03a1364b6e5: Stockholm: Start revamping the methods for focus/mention indicators. At this point the alternating blue-blue, blue-green, green-blue, and green-green variants use the new structure. The non-color specific portions have been pushed into main.css, regular.css and alternating.css, so further changes should be easier. The non-alternating variants of those colors still use the old methods.

details:	http://hg.adium.im/xtras/mathuaerknedam/rev/a03a1364b6e5
revision:	302:a03a1364b6e5
author:		mathuaerknedam
date:		Fri Dec 11 16:51:02 2009 -0600

Stockholm: Start revamping the methods for focus/mention indicators. At this point the alternating blue-blue, blue-green, green-blue, and green-green variants use the new structure. The non-color specific portions have been pushed into main.css, regular.css and alternating.css, so further changes should be easier. The non-alternating variants of those colors still use the old methods.

diffs (truncated from 2349 to 1000 lines):

diff -r 6b3e602a33ff -r a03a1364b6e5 Stockholm ☿.AdiumMessageStyle/Contents/Resources/Mockup-color.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/Stockholm ☿.AdiumMessageStyle/Contents/Resources/Mockup-color.html	Fri Dec 11 16:51:02 2009 -0600
@@ -0,0 +1,158 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
+	<head>
+		<title>Multiple Backgrounds</title>
+		<style type="text/css">
+
+			@import url( "./Main.css" );
+			@import url( "./Variants/alt green - blue.css" );
+
+			body
+			{
+				margin: 8px;
+				font-family: LucidaGrande;
+				font-size: 11px;
+			}
+		</style>
+	</head>
+	<body>
+
+<div class="x-container focus incoming message voice">
+	<div class="x-iconsubstitute" background="Incoming/buddy_icon.png">
+		<div class="x-contents_left">
+			<img class="x-buddyicon" src="Incoming/buddy_icon.png">
+			<div class="x-iconoverlay"></div>
+		</div>
+	</div>
+	<div class="x-contents_right" background="Incoming/buddy_icon.png">
+		<div class="x-message_top">
+			<div class="x-header">
+				<div class="x-incomingheader_left"></div>
+				<div class="x-incomingheader_center">
+					<div class="x-sender">LuX</div>
+					<div class="x-time">8:34 AM</div>
+				</div>
+				<div class="x-incomingheader_right"></div>
+			</div>
+			<div class="x-message">
+				<div class="x-message_left"></div>
+				<div class="x-message_right"></div>
+					<div class="x-text">
+						<p><a href=http://>1|_</a></p>
+					</div>
+				</div>
+			</div>
+			<div class="x-message_bottom">
+				<div class="x-message_bottomleft"></div>
+				<div class="x-message_bottomcenter"></div>
+				<div class="x-message_bottomright"></div>
+			</div>
+		</div>
+	</div>
+
+<div class="x-container incoming message voice">
+	<div class="x-iconsubstitute" background="Incoming/buddy_icon.png">
+		<div class="x-contents_left">
+			<img class="x-buddyicon" src="Incoming/buddy_icon.png">
+			<div class="x-iconoverlay"></div>
+		</div>
+	</div>
+	<div class="x-contents_right" background="Incoming/buddy_icon.png">
+		<div class="x-message_top">
+			<div class="x-header">
+				<div class="x-incomingheader_left"></div>
+				<div class="x-incomingheader_center">
+					<div class="x-sender">LuX</div>
+					<div class="x-time">8:34 AM</div>
+				</div>
+				<div class="x-incomingheader_right"></div>
+			</div>
+			<div class="x-message">
+				<div class="x-message_left"></div>
+				<div class="x-message_right"></div>
+					<div class="x-text">
+						<p><a href=http://>1|_</a></p>
+					</div>
+				</div>
+			</div>
+			<div class="x-message_bottom">
+				<div class="x-message_bottomleft"></div>
+				<div class="x-message_bottomcenter"></div>
+				<div class="x-message_bottomright"></div>
+			</div>
+		</div>
+	</div>
+
+<HR>
+
+<div class="x-container focus outgoing message">
+	<div class="x-iconsubstitute" background="file:///Users/mneedham/Library/Caches/Adium/Default/TEMP-15YNLJ7.png">
+		<div class="x-outgoing_left">
+			<img class="x-outgoing_buddyicon" src="file:///Users/mneedham/Library/Caches/Adium/Default/TEMP-15YNLJ7.png">
+			<div class="x-outgoing_iconoverlay"></div>
+		</div>
+	</div>
+	<div class="x-outgoing_right" background="file:///Users/mneedham/Library/Caches/Adium/Default/TEMP-15YNLJ7.png">
+		<div class="x-message_top">
+			<div class="x-header">
+				<div class="x-outgoingheader_left"></div>
+				<div class="x-outgoingheader_center">
+					<div class="x-sender">aerk</div>
+					<div class="x-time">6:31 PM</div>
+				</div>
+				<div class="x-outgoingheader_right"></div>
+			</div>
+			<div class="x-message">
+				<div class="x-outgoingmessage_left"></div>
+				<div class="x-outgoingmessage_right"></div>
+					<div class="x-text">
+						<p><a href=http://>1|_</a></p>
+					</div>
+				</div>
+			</div>
+			<div class="x-message_bottom">
+				<div class="x-outgoingmessage_bottomleft"></div>
+				<div class="x-outgoingmessage_bottomcenter"></div>
+				<div class="x-outgoingmessage_bottomright"></div>
+			</div>
+		</div>
+	</div>
+
+<div class="x-container outgoing message">
+	<div class="x-iconsubstitute" background="file:///Users/mneedham/Library/Caches/Adium/Default/TEMP-15YNLJ7.png">
+		<div class="x-outgoing_left">
+			<img class="x-outgoing_buddyicon" src="file:///Users/mneedham/Library/Caches/Adium/Default/TEMP-15YNLJ7.png">
+			<div class="x-outgoing_iconoverlay"></div>
+		</div>
+	</div>
+	<div class="x-outgoing_right" background="file:///Users/mneedham/Library/Caches/Adium/Default/TEMP-15YNLJ7.png">
+		<div class="x-message_top">
+			<div class="x-header">
+				<div class="x-outgoingheader_left"></div>
+				<div class="x-outgoingheader_center">
+					<div class="x-sender">aerk</div>
+					<div class="x-time">6:31 PM</div>
+				</div>
+				<div class="x-outgoingheader_right"></div>
+			</div>
+			<div class="x-message">
+				<div class="x-outgoingmessage_left"></div>
+				<div class="x-outgoingmessage_right"></div>
+					<div class="x-text">
+						<p><a href=http://>1|_</a></p>
+					</div>
+				</div>
+			</div>
+			<div class="x-message_bottom">
+				<div class="x-outgoingmessage_bottomleft"></div>
+				<div class="x-outgoingmessage_bottomcenter"></div>
+				<div class="x-outgoingmessage_bottomright"></div>
+			</div>
+		</div>
+	</div>
+
+
+
+		</body>
+</html>
diff -r 6b3e602a33ff -r a03a1364b6e5 Stockholm ☿.AdiumMessageStyle/Contents/Resources/Mockup.html
--- a/Stockholm ☿.AdiumMessageStyle/Contents/Resources/Mockup.html	Wed Dec 09 13:46:13 2009 -0600
+++ b/Stockholm ☿.AdiumMessageStyle/Contents/Resources/Mockup.html	Fri Dec 11 16:51:02 2009 -0600
@@ -11,6 +11,8 @@
 			body
 			{
 				margin: 8px;
+				font-family: LucidaGrande;
+				font-size: 11px;
 			}
 		</style>
 	</head>
@@ -92,6 +94,42 @@
 				<div class="x-message_right"></div>
 					<div class="x-text">
 						<p><a href=http://>sure</a></p>
+					</div>
+				</div>
+				<div class="x-message_bottom">
+					<div class="x-message_bottomleft"></div>
+					<div class="x-message_bottomcenter"></div>
+					<div class="x-message_bottomright"></div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+<HR>
+
+<div class="x-ctx_container mention incoming message history">
+	<div class="x-iconsubstitute" background="file:///Users/mneedham/Library/Caches/Adium/Default/TEMP-MetaContact-14NFTB1.png">
+		<div class="x-contents_left">
+			<img class="x-buddyicon" src="file:///Users/mneedham/Library/Caches/Adium/Default/TEMP-MetaContact-14NFTB1.png">
+			<div class="x-iconoverlay"></div>
+		</div>
+	</div>
+	<div class="x-contents_right" background="file:///Users/mneedham/Library/Caches/Adium/Default/TEMP-MetaContact-14NFTB1.png">
+		<div class="x-message_top">
+			<div class="x-header">
+				<div class="x-header_ctx_left"></div>
+				<div class="x-header_ctx_center">
+					<div class="x-sender">dneedham.g</div>
+					<div class="x-time">9:10 PM</div>
+				</div>
+				<div class="x-header_ctx_right"></div>
+			</div>
+			<div class="x-message">
+				<div class="x-message_left"></div>
+				<div class="x-message_right"></div>
+					<div class="x-text">
+						<p><a href=http://>sure</a></p>
 						<div class="x-combine consecutive incoming message history">
 							<div class="x-ctime">9:10 PM</div>
 							but they know
@@ -192,6 +230,63 @@
 
 <HR>
 
+INCOMING CONTENT FOCUS (no icon)
+
+<HR>
+
+<div class="x-container focus incoming message voice">
+	<div class="x-iconsubstitute" background="Incoming/buddy_icon.png">
+		<div class="x-contents_left">
+			<img class="x-buddyicon" src="Incoming/buddy_icon.png">
+			<div class="x-iconoverlay"></div>
+		</div>
+	</div>
+	<div class="x-contents_right" background="Incoming/buddy_icon.png">
+		<div class="x-message_top">
+			<div class="x-header">
+				<div class="x-incomingheader_left"></div>
+				<div class="x-incomingheader_center">
+					<div class="x-sender">LuX</div>
+					<div class="x-time">8:34 AM</div>
+				</div>
+				<div class="x-incomingheader_right"></div>
+			</div>
+			<div class="x-message">
+				<div class="x-message_left"></div>
+				<div class="x-message_right"></div>
+					<div class="x-text">
+						<p><a href=http://>         (__) </a></p>
+						<div class="x-combine consecutive incoming message voice">
+							<div class="x-ctime">8:34 AM</div>
+							         (oo) 
+						</div>
+						<div class="x-combine consecutive incoming message voice">
+							<div class="x-ctime">8:34 AM</div>
+							   /------\/ 
+						</div>
+							<div class="x-combine consecutive incoming message voice">
+							<div class="x-ctime">8:34 AM</div>
+							  / |    ||   </div>
+						<div class="x-combine consecutive incoming message voice">
+							<div class="x-ctime">8:35 AM</div>
+							 *  /\---/\ </div>
+						<div class="x-combine consecutive incoming message voice">
+							<div class="x-ctime">8:35 AM</div>
+							    ~~   ~~   
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="x-message_bottom">
+				<div class="x-message_bottomleft"></div>
+				<div class="x-message_bottomcenter"></div>
+				<div class="x-message_bottomright"></div>
+			</div>
+		</div>
+	</div>
+
+<HR>
+
 INCOMING CONTENT MENTION (no icon)
 
 <HR>
@@ -284,60 +379,59 @@
 
 <HR>
 
-INCOMING CONTENT FOCUS (no icon)
+STATUS
 
 <HR>
 
-<div class="x-container focus incoming message voice">
-	<div class="x-iconsubstitute" background="Incoming/buddy_icon.png">
-		<div class="x-contents_left">
-			<img class="x-buddyicon" src="Incoming/buddy_icon.png">
-			<div class="x-iconoverlay"></div>
-		</div>
+<div class="x-status_container date_separator event">
+	<div class="x-status_top">
+		<div class="x-status_r_topcorner"></div>
+		<div class="x-status_r_top"></div>
+		<div class="x-status_l_topcorner"></div>
+		<div class="x-status_l_top"></div>
 	</div>
-	<div class="x-contents_right" background="Incoming/buddy_icon.png">
-		<div class="x-message_top">
-			<div class="x-header">
-				<div class="x-incomingheader_left"></div>
-				<div class="x-incomingheader_center">
-					<div class="x-sender">LuX</div>
-					<div class="x-time">8:34 AM</div>
-				</div>
-				<div class="x-incomingheader_right"></div>
-			</div>
-			<div class="x-message">
-				<div class="x-message_left"></div>
-				<div class="x-message_right"></div>
-					<div class="x-text">
-						<p><a href=http://>         (__) </a></p>
-						<div class="x-combine consecutive incoming message voice">
-							<div class="x-ctime">8:34 AM</div>
-							         (oo) 
-						</div>
-						<div class="x-combine consecutive incoming message voice">
-							<div class="x-ctime">8:34 AM</div>
-							   /------\/ 
-						</div>
-							<div class="x-combine consecutive incoming message voice">
-							<div class="x-ctime">8:34 AM</div>
-							  / |    ||   </div>
-						<div class="x-combine consecutive incoming message voice">
-							<div class="x-ctime">8:35 AM</div>
-							 *  /\---/\ </div>
-						<div class="x-combine consecutive incoming message voice">
-							<div class="x-ctime">8:35 AM</div>
-							    ~~   ~~   
-						</div>
-					</div>
-				</div>
-			</div>
-			<div class="x-message_bottom">
-				<div class="x-message_bottomleft"></div>
-				<div class="x-message_bottomcenter"></div>
-				<div class="x-message_bottomright"></div>
-			</div>
-		</div>
+	<div class="x-status_leftside"></div>
+	<div class="x-status_rightside"></div>
+	<div class="x-status_right">
+		<div class="x-status_left">8:34</div>
+		Sunday, December 6, 2009<br>
+		<div class="x-status_bump"></div>
 	</div>
+	<div class="x-status_bottom">
+		<div class="x-status_r_bottomcorner"></div>
+		<div class="x-status_r_bottom"></div>
+		<div class="x-status_l_bottomcorner"></div>
+		<div class="x-status_l_bottom"></div>
+	</div>
+</div>
+
+<HR>
+
+STATUS FOCUS
+
+<HR>
+
+<div class="x-status_container focus date_separator event">
+	<div class="x-status_top">
+		<div class="x-status_r_topcorner"></div>
+		<div class="x-status_r_top"></div>
+		<div class="x-status_l_topcorner"></div>
+		<div class="x-status_l_top"></div>
+	</div>
+	<div class="x-status_leftside"></div>
+	<div class="x-status_rightside"></div>
+	<div class="x-status_right">
+		<div class="x-status_left">8:34</div>
+		Sunday, December 6, 2009<br>
+		<div class="x-status_bump"></div>
+	</div>
+	<div class="x-status_bottom">
+		<div class="x-status_r_bottomcorner"></div>
+		<div class="x-status_r_bottom"></div>
+		<div class="x-status_l_bottomcorner"></div>
+		<div class="x-status_l_bottom"></div>
+	</div>
+</div>
 
 <HR>
 
@@ -451,7 +545,7 @@
 						</div>
 						<div class="x-combine consecutive outgoing message">
 							<div class="x-ctime">6:31 PM</div>
-							3
+							<a href=http://>3</a>
 						</div>
 					</div>
 				</div>
@@ -533,7 +627,7 @@
 						</div>
 						<div class="x-combine consecutive outgoing message">
 							<div class="x-ctime">6:31 PM</div>
-							3
+							<a href=http://>3</a>
 						</div>
 					</div>
 				</div>
diff -r 6b3e602a33ff -r a03a1364b6e5 Stockholm ☿.AdiumMessageStyle/Contents/Resources/Topic.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/Stockholm ☿.AdiumMessageStyle/Contents/Resources/Topic.css	Fri Dec 11 16:51:02 2009 -0600
@@ -0,0 +1,35 @@
+#x-header
+{
+	position: fixed; 
+	top: 0px; 
+	left: 0px; 
+	right: 0px; 
+	margin: 0; 
+	padding: 5px; 
+	padding-bottom: 8px; 
+	overflow: auto; 
+	color: black; 
+	text-align: center; 
+	/*font-family: sans-serif;
+	font-size: 10px;*/
+	font-size: 1em;
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(rgba(187, 187, 187, 1)), to(rgba(187, 187, 187, 1))) left bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(159, 159, 159, 1)), to(rgba(159, 159, 159, 1))) left bottom no-repeat,
+
+		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, 1)), to(rgba(248, 248, 248, 1))) left bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(241, 241, 241, 1)), to(rgba(241, 241, 241, 1))) left top no-repeat;
+	-webkit-background-size:
+		100% 1px,
+		100% 2px,
+
+		100% 3px,
+		100% 100%;
+	z-index: 999; 
+}
+
+#x-header a
+{
+	color: dark grey;
+}
+
diff -r 6b3e602a33ff -r a03a1364b6e5 Stockholm ☿.AdiumMessageStyle/Contents/Resources/Topic.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/Stockholm ☿.AdiumMessageStyle/Contents/Resources/Topic.html	Fri Dec 11 16:51:02 2009 -0600
@@ -0,0 +1,6 @@
+<style type="text/css">
+	@import url( "./Topic.css" );
+</style>
+<div id="x-header">
+	%topic%
+</div>
diff -r 6b3e602a33ff -r a03a1364b6e5 Stockholm ☿.AdiumMessageStyle/Contents/Resources/Variants/Alt Blue - Blue.css
--- a/Stockholm ☿.AdiumMessageStyle/Contents/Resources/Variants/Alt Blue - Blue.css	Wed Dec 09 13:46:13 2009 -0600
+++ b/Stockholm ☿.AdiumMessageStyle/Contents/Resources/Variants/Alt Blue - Blue.css	Fri Dec 11 16:51:02 2009 -0600
@@ -30,113 +30,88 @@
 	background: url("../images/blue_left_a.png") top right no-repeat;
 }
 
-.x-message
+.focus:not(.history):not(.mention) .x-contents_right .x-header
 {
-	padding-top: 3px;
-	margin-bottom: -2px;
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(140, 140, 140, 1)), to(rgba(140, 140, 140, 1))) right bottom no-repeat,
+
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) right bottom no-repeat,
+
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 73%, 1)), to(hsla(215, 73%, 73%, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 58%, 1)), to(hsla(215, 73%, 58%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 62%, 1)), color-stop(.5, hsla(215, 73%, 52%, 1)), to(hsla(215, 73%, 50%, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 62%, 1)), color-stop(.5, hsla(215, 73%, 52%, 1)), to(hsla(215, 73%, 50%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 57%, 1)), color-stop(.45, hsla(215, 73%, 48%, 1)), color-stop(.5, hsla(215, 73%, 46%, 1)), to(hsla(215, 73%, 53%, 1))) 1px 1px no-repeat;
+	-webkit-border-top-right-radius: 5px;
 }
 
-.x-message_bottom
+.focus:not(.history):not(.mention) .x-outgoing_right .x-header
 {
-	height: 4px;
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(140, 140, 140, 1)), to(rgba(140, 140, 140, 1))) right bottom no-repeat,
+
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) right bottom no-repeat,
+
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 73%, 1)), to(hsla(215, 73%, 73%, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 58%, 1)), to(hsla(215, 73%, 58%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 62%, 1)), color-stop(.5, hsla(215, 73%, 52%, 1)), to(hsla(215, 73%, 50%, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 62%, 1)), color-stop(.5, hsla(215, 73%, 52%, 1)), to(hsla(215, 73%, 50%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 57%, 1)), color-stop(.45, hsla(215, 73%, 48%, 1)), color-stop(.5, hsla(215, 73%, 46%, 1)), to(hsla(215, 73%, 53%, 1))) 1px 1px no-repeat;
+	-webkit-border-top-left-radius: 5px;
 }
 
-.mention .x-contents_right .x-header
+/* mention+focus header*/
+
+.mention.focus .x-header
 {
 	background:
-		-webkit-gradient(linear, left top, left bottom, from(rgba(202, 202, 202, 1)), to(rgba(202, 202, 202, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 41%, .8)), to(hsla(215, 73%, 41%, .8))) left 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 41%, .8)), to(hsla(215, 73%, 41%, .8))) left 1px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(140, 140, 140, 1)), to(rgba(140, 140, 140, 1))) left 5px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(192, 192, 192, .5)), to(rgba(192, 192, 192, 1))) left 5px no-repeat,
 
-		-webkit-gradient(linear, left top, left bottom, from(rgba(202, 202, 202, 1)), to(rgba(202, 202, 202, 1))) 0px 0px no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, 1)), to(rgba(248, 248, 248, 1))) 1px 1px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 41%, .8)), to(hsla(215, 73%, 41%, .8))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 41%, .8)), to(hsla(215, 73%, 41%, .8))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(140, 140, 140, 1)), to(rgba(140, 140, 140, 1))) right 5px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(192, 192, 192, .5)), to(rgba(192, 192, 192, 1))) right 5px no-repeat,
 
-		-webkit-gradient(linear, left top, left bottom, from(rgba(187, 187, 187, 1)), to(rgba(187, 187, 187, 1))) right top no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, 1)), to(rgba(248, 248, 248, 1))) right 1px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 30%, 1)), to(hsla(215, 73%, 30%, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 68%, 1)), to(hsla(215, 73%, 68%, 1))) 0px 1px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 49%, 1)), to(hsla(215, 73%, 49%, 1))) 0px 2px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 41%, 1)), to(hsla(215, 73%, 41%, 1))) 0px 3px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(140, 140, 140, 1)), to(rgba(140, 140, 140, 1))) 0px 4px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(181, 181, 181, 1)), to(rgba(181, 181, 181, 1))) 1px 5px no-repeat,
 
-		-webkit-gradient(linear, left top, left bottom, from(rgba(202, 202, 202, 1)), to(rgba(202, 202, 202, 1))) 0px 0px no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, 1)), to(rgba(248, 248, 248, 1))) 1px 1px no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(rgba(241, 241, 241, 1)), to(rgba(241, 241, 241, 1))) 2px 2px no-repeat;
+		-webkit-gradient(linear, left top, left bottom, from(rgba(181, 181, 181, 1)), to(rgba(181, 181, 181, 1))) 1px 6px no-repeat;
 	-webkit-border-top-right-radius: 4px;
 }
 
-.mention .x-header
-{
-	-webkit-background-size:
-		2px 2px,
+/* mention header*/
 
-		1px 100%,
-		1px 100%,
-
-		1px 100%,
-		2px 100%,
-
-		100% 1px,
-		100% 1px,
-		100% 100%;
-}
-
-.mention .x-contents_right .x-message
+.mention:not(.focus) .x-header
 {
 	background:
-		-webkit-gradient(linear, left top, left bottom, from(rgba(187, 187, 187, 1)), to(rgba(187, 187, 187, 1))) right bottom no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) right bottom no-repeat,
-
-		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) 0px 0px no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) 0px 0px no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) right bottom no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) right bottom no-repeat,
-
-		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 73%, 1)), to(hsla(215, 73%, 73%, 1))) 0px 0px no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 62%, 1)), color-stop(.5, hsla(215, 73%, 52%, 1)), to(hsla(215, 73%, 50%, 1))) 0px 0px no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 63%, 1)), to(hsla(215, 73%, 63%, 1))) right bottom no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 62%, 1)), color-stop(.5, hsla(215, 73%, 52%, 1)), to(hsla(215, 73%, 50%, 1))) right bottom no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 57%, 1)), color-stop(.45, hsla(215, 73%, 48%, 1)), color-stop(.5, hsla(215, 73%, 46%, 1)), to(hsla(215, 73%, 53%, 1))) 1px 1px no-repeat;
-	-webkit-border-bottom-right-radius: 5px;
-}
-
-.mention .x-contents_right .x-message
-{
-	-webkit-background-size:
-		100% 1px,
-		2px 3px,
-
-		100% 1px,
-		1px 100%,
-		100% 2px,
-		1px 100%,
-
-		100% 2px,
-		2px 100%,
-		100% 3px,
-		2px 100%,
-		100% 100%;
-	color: white;
-	padding-bottom: 2px;
-	margin-bottom: 0px;
-	text-shadow: #4D4D4D 1px 1px 1px;
-}
-
-.mention a,
-.mention .x-ctime
-{
-	color: white;
-}
-
-.focus:not(.history):not(.mention) .x-contents_right .x-message_top
-{
-	background:
-		-webkit-gradient(linear, left top, left bottom, from(rgba(202, 202, 202, 1)), to(rgba(187, 187, 187, 1))) right bottom no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(rgba(187, 187, 187, 1)), to(rgba(187, 187, 187, 1))) right bottom no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(rgba(159, 159, 159, 1)), to(rgba(159, 159, 159, 1))) right bottom no-repeat,
-
 		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 41%, .8)), to(hsla(215, 73%, 41%, .8))) left 0px no-repeat,
 		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 41%, .8)), to(hsla(215, 73%, 41%, .8))) left 1px no-repeat,
 		-webkit-gradient(linear, left top, left bottom, from(rgba(202, 202, 202, 1)), to(rgba(202, 202, 202, 1))) left 5px no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, 1)), to(rgba(248, 248, 248, 1))) left 6px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, .5)), to(rgba(248, 248, 248, 1))) left 5px no-repeat,
 		
 		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 41%, .8)), to(hsla(215, 73%, 41%, .8))) right top no-repeat,
 		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 41%, .8)), to(hsla(215, 73%, 41%, .8))) right top no-repeat,
 		-webkit-gradient(linear, left top, left bottom, from(rgba(187, 187, 187, 1)), to(rgba(187, 187, 187, 1))) right 5px no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, 1)), to(rgba(248, 248, 248, 1))) right 6px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, .5)), to(rgba(248, 248, 248, 1))) right 5px no-repeat,
 
 		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 30%, 1)), to(hsla(215, 73%, 30%, 1))) 0px 0px no-repeat,
 		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 68%, 1)), to(hsla(215, 73%, 68%, 1))) 0px 1px no-repeat,
@@ -145,185 +120,6 @@
 		-webkit-gradient(linear, left top, left bottom, from(rgba(178, 178, 178, 1)), to(rgba(178, 178, 178, 1))) 0px 4px no-repeat,
 		-webkit-gradient(linear, left top, left bottom, from(rgba(220, 220, 220, 1)), to(rgba(220, 220, 220, 1))) 1px 5px no-repeat,
 
-		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, 1)), to(rgba(248, 248, 248, 1))) right bottom no-repeat,
 		-webkit-gradient(linear, left top, left bottom, from(rgba(241, 241, 241, 1)), to(rgba(241, 241, 241, 1))) 1px 6px no-repeat;
 	-webkit-border-top-right-radius: 4px;
-	-webkit-border-bottom-right-radius: 5px;
 }
-
-.focus:not(.history):not(.mention) .x-outgoing_right .x-message_top
-{
-	background:
-		-webkit-gradient(linear, left top, left bottom, from(rgba(202, 202, 202, 1)), to(rgba(187, 187, 187, 1))) left bottom no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(rgba(187, 187, 187, 1)), to(rgba(187, 187, 187, 1))) left bottom no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(rgba(159, 159, 159, 1)), to(rgba(159, 159, 159, 1))) left bottom no-repeat,
-
-		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 41%, .8)), to(hsla(215, 73%, 41%, .8))) right 0px no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 41%, .8)), to(hsla(215, 73%, 41%, .8))) right 1px no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(rgba(202, 202, 202, 1)), to(rgba(202, 202, 202, 1))) right 5px no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, 1)), to(rgba(248, 248, 248, 1))) right 6px no-repeat,
-		
-		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 41%, .8)), to(hsla(215, 73%, 41%, .8))) left top no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 41%, .8)), to(hsla(215, 73%, 41%, .8))) left top no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(rgba(187, 187, 187, 1)), to(rgba(187, 187, 187, 1))) left 5px no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, 1)), to(rgba(248, 248, 248, 1))) left 6px no-repeat,
-
-		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 30%, 1)), to(hsla(215, 73%, 30%, 1))) 0px 0px no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 68%, 1)), to(hsla(215, 73%, 68%, 1))) 0px 1px no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 49%, 1)), to(hsla(215, 73%, 49%, 1))) 0px 2px no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 41%, 1)), to(hsla(215, 73%, 41%, 1))) 0px 3px no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(rgba(178, 178, 178, 1)), to(rgba(178, 178, 178, 1))) 0px 4px no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(rgba(220, 220, 220, 1)), to(rgba(220, 220, 220, 1))) 1px 5px no-repeat,
-
-		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, 1)), to(rgba(248, 248, 248, 1))) left bottom no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(rgba(241, 241, 241, 1)), to(rgba(241, 241, 241, 1))) 1px 6px no-repeat;
-	-webkit-border-top-left-radius: 4px;
-	-webkit-border-bottom-left-radius: 5px;
-}
-
-.focus:not(.history):not(.mention) .x-message_top
-{
-	-webkit-background-size:
-		2px 3px,
-		100% 1px,
-		100% 2px,
-
-		1px 1px,
-		1px 3px,
-		1px 100%,
-		2px 100%,
-
-		3px 2px,
-		2px 4px,
-		1px 100%,
-		2px 100%,
-
-		100% 1px,
-		100% 1px,
-		100% 1px,
-		100% 1px,
-		100% 1px,
-		100% 1px,
-
-		100% 3px,
-		100% 100%;
-	padding-bottom: 4px;
-}
-
-.x-text
-{
-	padding-right: 6px;
-}
-
-.x-text p
-{
-	margin-top: 0px;
-	margin-bottom: 1px;
-}
-
-.x-text .x-combine
-{
-	margin-top: 2px;
-	margin-bottom: 1px;
-	padding-top: 2px;
-}
-
-.mention .x-header
-{
-	color: black;
-	text-shadow: none;
-	height: 19px;
-}
-
-.x-header
-{
-	height: 19px;
-}
-
-.mention .x-incomingheader_left,
-.mention .x-incomingheader_right,
-.mention .x-outgoingheader_left,
-.mention .x-outgoingheader_right,
-.mention .x-outgoingheader_ctx_left,
-.mention .x-outgoingheader_ctx_right,
-.mention .x-outgoingmessage_right,
-.mention .x-outgoingmessage_left,
-.mention .x-outgoingmessage_bottomleft,
-.mention .x-outgoingmessage_bottomright,
-.mention .x-outgoingmessage_bottomcenter,
-.mention .x-message_left,
-.mention .x-message_right,
-.mention .x-message_bottom,
-.mention .x-message_bottomleft,
-.mention .x-message_bottomcenter,
-.mention .x-message_bottomright,
-.mention .x-header_ctx_left,
-.mention .x-header_ctx_right,
-.focus:not(.history):not(.mention) .x-incomingheader_left,
-.focus:not(.history):not(.mention) .x-incomingheader_right,
-.focus:not(.history):not(.mention) .x-outgoingheader_left,
-.focus:not(.history):not(.mention) .x-outgoingheader_right,
-.focus:not(.history):not(.mention) .x-outgoingmessage_right,
-.focus:not(.history):not(.mention) .x-outgoingmessage_left,
-.focus:not(.history):not(.mention) .x-outgoingmessage_bottomleft,
-.focus:not(.history):not(.mention) .x-outgoingmessage_bottomright,
-.focus:not(.history):not(.mention) .x-outgoingmessage_bottomcenter,
-.focus:not(.history):not(.mention) .x-message_left,
-.focus:not(.history):not(.mention) .x-message_right,
-.focus:not(.history):not(.mention) .x-message_bottom,
-.focus:not(.history):not(.mention) .x-message_bottomleft,
-.focus:not(.history):not(.mention) .x-message_bottomcenter,
-.focus:not(.history):not(.mention) .x-message_bottomright
-{
-	display: none;
-}
-
-.mention .x-outgoingheader_ctx_center,
-.mention .x-header_ctx_center,
-.mention .x-incomingheader_center,
-.mention .x-message,
-.focus:not(.history):not(.mention) .x-incomingheader_center,
-.focus:not(.history):not(.mention) .x-outgoingheader_center,
-.focus:not(.history):not(.mention) .x-header_center,
-.focus:not(.history):not(.mention) .x-message
-{
-	background: none;
-}
-
-.x-sender
-{
-	padding-top: 3px;
-}
-
-.x-time
-{
-	top: 3px;
-}
-
-.x-combine .x-ctime
-{
-	margin-right: 0px;
-	margin-left: 8px;
-}
-	
-.mention .x-combine
-{
-	border-top: 1px solid rgba(255, 255, 255, .2);
-}
-
-.focus:not(.history):not(.mention) .x-sender,
-.focus:not(.history):not(.mention) .x-time
-{
-	text-shadow: none;
-	margin-top: 2px;
-}
-
-.focus:not(.history).incoming .x-header
-{
-	color: rgb(52, 82, 188);
-}
-
-.focus:not(.history).outgoing .x-header
-{
-	color: rgb(52, 82, 188);
-}
diff -r 6b3e602a33ff -r a03a1364b6e5 Stockholm ☿.AdiumMessageStyle/Contents/Resources/Variants/Alt Blue - Green.css
--- a/Stockholm ☿.AdiumMessageStyle/Contents/Resources/Variants/Alt Blue - Green.css	Wed Dec 09 13:46:13 2009 -0600
+++ b/Stockholm ☿.AdiumMessageStyle/Contents/Resources/Variants/Alt Blue - Green.css	Fri Dec 11 16:51:02 2009 -0600
@@ -30,113 +30,90 @@
 	background: url("../images/green_left_a.png") top right no-repeat;
 }
 
-.x-message
+/* focus header*/
+
+.focus:not(.history):not(.mention) .x-contents_right .x-header
 {
-	padding-top: 3px;
-	margin-bottom: -2px;
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(140, 140, 140, 1)), to(rgba(140, 140, 140, 1))) right bottom no-repeat,
+
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) right bottom no-repeat,
+
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 73%, 1)), to(hsla(215, 73%, 73%, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 58%, 1)), to(hsla(215, 73%, 58%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 62%, 1)), color-stop(.5, hsla(215, 73%, 52%, 1)), to(hsla(215, 73%, 50%, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 62%, 1)), color-stop(.5, hsla(215, 73%, 52%, 1)), to(hsla(215, 73%, 50%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 57%, 1)), color-stop(.45, hsla(215, 73%, 48%, 1)), color-stop(.5, hsla(215, 73%, 46%, 1)), to(hsla(215, 73%, 53%, 1))) 1px 1px no-repeat;
+	-webkit-border-top-right-radius: 5px;
 }
 
-.x-message_bottom
+.focus:not(.history):not(.mention) .x-outgoing_right .x-header
 {
-	height: 4px;
+	background:
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 33%, 1)), to(hsla(95, 66%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 33%, 1)), to(hsla(95, 66%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 33%, 1)), to(hsla(95, 66%, 33%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(140, 140, 140, 1)), to(rgba(140, 140, 140, 1))) right bottom no-repeat,
+
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 33%, 1)), to(hsla(95, 66%, 33%, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 33%, 1)), to(hsla(95, 66%, 33%, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 33%, 1)), to(hsla(95, 66%, 33%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 33%, 1)), to(hsla(95, 66%, 33%, 1))) right bottom no-repeat,
+
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 68%, 1)), to(hsla(95, 66%, 68%, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 43%, 1)), to(hsla(95, 66%, 43%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 57%, 1)), color-stop(.5, hsla(95, 66%, 43%, 1)), to(hsla(95, 66%, 41%, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 57%, 1)), color-stop(.5, hsla(95, 66%, 43%, 1)), to(hsla(95, 66%, 41%, 1))) right bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(95, 66%, 51%, 1)), color-stop(.45, hsla(95, 66%, 42%, 1)), color-stop(.5, hsla(95, 66%, 40%, 1)), to(hsla(95, 66%, 41%, 1))) 1px 1px no-repeat;
+	-webkit-border-top-left-radius: 5px;
 }
 
-.mention .x-contents_right .x-header
+/* mention+focus header*/
+
+.mention.focus .x-header
 {
 	background:
-		-webkit-gradient(linear, left top, left bottom, from(rgba(202, 202, 202, 1)), to(rgba(202, 202, 202, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 41%, .8)), to(hsla(215, 73%, 41%, .8))) left 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 41%, .8)), to(hsla(215, 73%, 41%, .8))) left 1px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(140, 140, 140, 1)), to(rgba(140, 140, 140, 1))) left 5px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(192, 192, 192, .5)), to(rgba(192, 192, 192, 1))) left 5px no-repeat,
 
-		-webkit-gradient(linear, left top, left bottom, from(rgba(202, 202, 202, 1)), to(rgba(202, 202, 202, 1))) 0px 0px no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, 1)), to(rgba(248, 248, 248, 1))) 1px 1px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 41%, .8)), to(hsla(215, 73%, 41%, .8))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 41%, .8)), to(hsla(215, 73%, 41%, .8))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(140, 140, 140, 1)), to(rgba(140, 140, 140, 1))) right 5px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(192, 192, 192, .5)), to(rgba(192, 192, 192, 1))) right 5px no-repeat,
 
-		-webkit-gradient(linear, left top, left bottom, from(rgba(187, 187, 187, 1)), to(rgba(187, 187, 187, 1))) right top no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, 1)), to(rgba(248, 248, 248, 1))) right 1px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 30%, 1)), to(hsla(215, 73%, 30%, 1))) 0px 0px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 68%, 1)), to(hsla(215, 73%, 68%, 1))) 0px 1px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 49%, 1)), to(hsla(215, 73%, 49%, 1))) 0px 2px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 41%, 1)), to(hsla(215, 73%, 41%, 1))) 0px 3px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(140, 140, 140, 1)), to(rgba(140, 140, 140, 1))) 0px 4px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(181, 181, 181, 1)), to(rgba(181, 181, 181, 1))) 1px 5px no-repeat,
 
-		-webkit-gradient(linear, left top, left bottom, from(rgba(202, 202, 202, 1)), to(rgba(202, 202, 202, 1))) 0px 0px no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, 1)), to(rgba(248, 248, 248, 1))) 1px 1px no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(rgba(241, 241, 241, 1)), to(rgba(241, 241, 241, 1))) 2px 2px no-repeat;
+		-webkit-gradient(linear, left top, left bottom, from(rgba(181, 181, 181, 1)), to(rgba(181, 181, 181, 1))) 1px 6px no-repeat;
 	-webkit-border-top-right-radius: 4px;
 }
 
-.mention .x-header
-{
-	-webkit-background-size:
-		2px 2px,
+/* mention header*/
 
-		1px 100%,
-		1px 100%,
-
-		1px 100%,
-		2px 100%,
-
-		100% 1px,
-		100% 1px,
-		100% 100%;
-}
-
-.mention .x-contents_right .x-message
+.mention:not(.focus) .x-header
 {
 	background:
-		-webkit-gradient(linear, left top, left bottom, from(rgba(187, 187, 187, 1)), to(rgba(187, 187, 187, 1))) right bottom no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) right bottom no-repeat,
-
-		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) 0px 0px no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) 0px 0px no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) right bottom no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 33%, 1)), to(hsla(215, 73%, 33%, 1))) right bottom no-repeat,
-
-		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 73%, 1)), to(hsla(215, 73%, 73%, 1))) 0px 0px no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 62%, 1)), color-stop(.5, hsla(215, 73%, 52%, 1)), to(hsla(215, 73%, 50%, 1))) 0px 0px no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 63%, 1)), to(hsla(215, 73%, 63%, 1))) right bottom no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 62%, 1)), color-stop(.5, hsla(215, 73%, 52%, 1)), to(hsla(215, 73%, 50%, 1))) right bottom no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 57%, 1)), color-stop(.45, hsla(215, 73%, 48%, 1)), color-stop(.5, hsla(215, 73%, 46%, 1)), to(hsla(215, 73%, 53%, 1))) 1px 1px no-repeat;
-	-webkit-border-bottom-right-radius: 5px;
-}
-
-.mention .x-contents_right .x-message
-{
-	-webkit-background-size:
-		100% 1px,
-		2px 3px,
-
-		100% 1px,
-		1px 100%,
-		100% 2px,
-		1px 100%,
-
-		100% 2px,
-		2px 100%,
-		100% 3px,
-		2px 100%,
-		100% 100%;
-	color: white;
-	padding-bottom: 2px;
-	margin-bottom: 0px;
-	text-shadow: #4D4D4D 1px 1px 1px;
-}
-
-.mention a,
-.mention .x-ctime
-{
-	color: white;
-}
-
-.focus:not(.history):not(.mention) .x-contents_right .x-message_top
-{
-	background:
-		-webkit-gradient(linear, left top, left bottom, from(rgba(202, 202, 202, 1)), to(rgba(187, 187, 187, 1))) right bottom no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(rgba(187, 187, 187, 1)), to(rgba(187, 187, 187, 1))) right bottom no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(rgba(159, 159, 159, 1)), to(rgba(159, 159, 159, 1))) right bottom no-repeat,
-
 		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 41%, .8)), to(hsla(215, 73%, 41%, .8))) left 0px no-repeat,
 		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 41%, .8)), to(hsla(215, 73%, 41%, .8))) left 1px no-repeat,
 		-webkit-gradient(linear, left top, left bottom, from(rgba(202, 202, 202, 1)), to(rgba(202, 202, 202, 1))) left 5px no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, 1)), to(rgba(248, 248, 248, 1))) left 6px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, .5)), to(rgba(248, 248, 248, 1))) left 5px no-repeat,
 		
 		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 41%, .8)), to(hsla(215, 73%, 41%, .8))) right top no-repeat,
 		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 41%, .8)), to(hsla(215, 73%, 41%, .8))) right top no-repeat,
 		-webkit-gradient(linear, left top, left bottom, from(rgba(187, 187, 187, 1)), to(rgba(187, 187, 187, 1))) right 5px no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, 1)), to(rgba(248, 248, 248, 1))) right 6px no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, .5)), to(rgba(248, 248, 248, 1))) right 5px no-repeat,
 
 		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 30%, 1)), to(hsla(215, 73%, 30%, 1))) 0px 0px no-repeat,
 		-webkit-gradient(linear, left top, left bottom, from(hsla(215, 73%, 68%, 1)), to(hsla(215, 73%, 68%, 1))) 0px 1px no-repeat,
@@ -145,185 +122,6 @@
 		-webkit-gradient(linear, left top, left bottom, from(rgba(178, 178, 178, 1)), to(rgba(178, 178, 178, 1))) 0px 4px no-repeat,
 		-webkit-gradient(linear, left top, left bottom, from(rgba(220, 220, 220, 1)), to(rgba(220, 220, 220, 1))) 1px 5px no-repeat,
 
-		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, 1)), to(rgba(248, 248, 248, 1))) right bottom no-repeat,


More information about the commits mailing list