From f79eb00ee67cef2540d3dde931267cfde20c4485 Mon Sep 17 00:00:00 2001
From: Kevin Kleinman <kevin_kleinman@live.nl>
Date: Sat, 19 Jan 2013 21:24:42 +0100
Subject: [PATCH] UI changes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Known bugs:
- Date of first item is not displayed properly;
- Need to get rid of text-shadow on x-repost-dropdowns.

Motivation for changes:
- odd/even backgrounds on posts looked like dropshadows - flat colours look cleaner;
- white text-shadows on links make them stand out slightly better;
- unlabelling mentions make for easier reading and looks cleaner - normally these are used to display mentions in writing areas (publishers);
- right-border on hover is less intrusive than background-color changing;
- date-tab can be fiddly and get in your way by overlapping other posts - first post was inconsistent;
- font looks slightly better.

Changes that should go with this commit:
- Shorter TimeAgo (7s, 30m, 3h, 4d, 19 jan);
- Time should always be visible;
- Removing the "from SourceApp" from the date pane;
- Putting a picture of a more vertically aligned ^ or a @ in front of names. Personally I am really a sucker for the @ as people are so familiar with it.

Additional changes (requiring more work):
- Show SourceApp below the post upon clicking the post;
- Show "view conversation" link there as well;
- Eventually have a map there for posts with locations.

Last but not least, I rest my case: Green is more awesome! But I have been so kind to leave all the blue in. ;-)
---
 WebKit/css/default.css | 67 +++++++++++++++++++++---------------------
 1 file changed, 33 insertions(+), 34 deletions(-)

diff --git a/WebKit/css/default.css b/WebKit/css/default.css
index aa89603..b389db5 100644
--- a/WebKit/css/default.css
+++ b/WebKit/css/default.css
@@ -5,14 +5,16 @@ html, body {
 }
 
 body {
-	font-family: "Lucida Grande", Tahoma, sans-serif;
+	font-family: "Open Sans", Tahoma, sans-serif;
 	font-size: 11px;
 	background: #dedede url(../img/background.png) center center no-repeat;
+	border-right: 1px solid #ddd;
 }
 
 a {
 	text-decoration: none;
 	color: #00317a;
+	text-shadow: 1px 1px white;
 }
 
 ol {
@@ -43,15 +45,17 @@ body > ol > li:first-child {
 }
 
 body > ol > li:nth-child(odd), .error, header.profile {
-	background: url(../img/odd-bg.png) repeat-x bottom #fafafa;
+	background: #fafafa;
+	border-right: 1px solid #fafafa;
 }
 
 body > ol > li:nth-child(even) {
-	background: url(../img/even-bg.png) repeat-x bottom #f2f2f2;
+	background: #f2f2f2;
+	border-right: 1px solid #f2f2f2;
 }
 
 body > ol > li:hover {
-	background: #dedede;
+	border-right: 1px solid #ccc;
 }
 
 body > ol > li:after, header.profile:after {
@@ -86,7 +90,7 @@ header.profile h1 + p {
 }
 
 .highlight {
-	border-right: 5px solid #f17779;
+	border-right: 3px solid #f17779;
 }
 
 h1 {
@@ -153,39 +157,33 @@ li .name:first-child {
 }
 
 .name {
-	background: #d8dfea;
 	font-weight: normal;
-	padding: 0 3px 2px 3px;
-	border-radius: 5px;
+	text-shadow: none;
+	padding-left: 2px;
 }
 
 li:hover .name {
-	background: #b8c1d0;
 }
 
 .is_private {
 	color: white;
-	padding: 0 4px 0 2px;
+	font-size: 8px;
+	padding: 0 3px 0 3px;
 	background: #09F;
 	border-radius: 3px;
-	font-style: italic;
 	font-weight: bold;
+	text-align: center;
 }
 
 
 li .date {
 	position: absolute;
-	top: -1.8em;
-	right: 10px;
+	top: 5px;
+	right: 3px;
 	display: none;
 	padding: 0.3em 0.9em;
-	-webkit-border-top-left-radius: 8px;
-	-webkit-border-top-right-radius: 8px;
-	-webkit-box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.1);
-	border: 1px solid white;
 	border-bottom: 0;
-	background: #ddd;
-	font-size: 0.9em;
+	font-size: 10px;
 }
 
 li:hover .date {
@@ -194,21 +192,22 @@ li:hover .date {
 
 
 li:first-child:hover .date {
-	top: auto;
-	bottom: -1.6em;
-	z-index: 2;
-	-webkit-border-top-left-radius: 0;
-	-webkit-border-top-right-radius: 0;
-	-webkit-border-bottom-left-radius: 8px;
-	-webkit-border-bottom-right-radius: 8px;
-	-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
-	border: 1px solid #b9b9b9;
-	border-top: 0;
+	position: absolute;
+	top: 5px;
+	right: 10px;
+	display: none;
+	padding: 0.3em 0.9em;
+	border-bottom: 0;
+	font-size: 10px;
 }
 
 aside {
+	width: 15px;
 	float: right;
-	margin: 0 3px 3px 3px;
+	margin-top: 20px;
+	margin-left: 3px;
+	margin-right: 3px;
+	margin-bottom: 3px;
 	visibility: hidden;
 }
 
@@ -216,8 +215,7 @@ aside {
 	width: 15px;
 	height: 12px;
 	background: url(../img/sprite-icons.png) no-repeat -16px 0;
-	float: right;
-	margin-left: 2px;
+	display: inline-block;
 }
 
 li:hover aside {
@@ -233,7 +231,7 @@ li:hover aside {
 }
 
 li.mentioned {
-	border-right: 5px solid #00317a;
+	border-right: 1px solid #00317a;
 }
 
 .mentions li.mentioned {
@@ -264,6 +262,7 @@ li.mentioned {
 	border-radius: 3px;
 	box-shadow: 0 0 5px rgba(0,0,0,0.7);
 	z-index: 2;
+	text-shadow: none;
 }
 
 .reposted_by:hover ul {
@@ -327,4 +326,4 @@ header.profile button {
 
 header.profile button.following {
 	background: #D84A38;
-}
\ No newline at end of file
+}