[ljcom] r10273: LJSUP-8105: friendstimes, implement new ...

U   trunk/htdocs/stc/friendstimes.css

Modified: trunk/htdocs/stc/friendstimes.css
===================================================================
--- trunk/htdocs/stc/friendstimes.css	2011-03-21 11:06:37 UTC (rev 10272)
+++ trunk/htdocs/stc/friendstimes.css	2011-03-22 04:25:38 UTC (rev 10273)
@@ -1,112 +1,177 @@
+html body {
+	background-color: #C5CFD7;
+	}
 .b-friendstimes {
 	margin: 0;
-	padding: 0;
+	padding: 24px 0 0;
 	list-style: none;
 	}
+.lanzelot-content .b-friendstimes {
+	padding-top: 0;
+	}
+	.b-friendstimes A:link {
+		color: #036;
+		}
+	.b-friendstimes A:visited {
+		color: #306;
+		}
+	.b-friendstimes A:hover,
+	.b-friendstimes A:active {
+		color: #036;
+		}
 	.b-friendstimes-item {
-		margin: 0 0 2em;
+		margin: 0 0 32px;
 		padding: 0;
 		list-style: none;
 		}
 		.b-friendstimes-wrapper {
-			position: relative;
 			min-height: 120px;
-			margin: 0 0 0 125px;
-			padding: 0;
+			padding: 20px;
+			-webkit-border-radius: 10px;
+			-moz-border-radius: 10px;
+			border-radius: 10px;
+			background-color: #FFF;
 			}
 			.b-friendstimes-aside {
-				overflow: hidden;
-				position: absolute;
-				top: 20px;
-				left: -125px;
-				width: 100px;
-				margin: 0;
-				padding: 0 25px 0 0;
-				text-align: center;
-				-o-text-overflow: ellipsis;
-				text-overflow: ellipsis;
+				float: left;
+				width: 100%;
 				}
 				.b-friendstimes-userpic {
-					margin: 0 0 5px;
+					margin: -34px 17px 7px 0;
+					position: relative;
+					float: left;
+					border: 1px solid #B9C0C4;
+					padding: 2px;
+
+					/* hack because we haven't images nao */
+					width: 96px;
+					height: 96px;
+					background-color: #FFF;
 					}
-				.b-friendstimes-aside .i-arrow {
-					position: absolute;
-					top: 0;
-					left: 105px;
-					width: 0;
-					height: 0;
-					margin: 0;
-					padding: 0;
-					border-top: 10px solid transparent;
-					border-right: 20px solid #C7E0F6;
-					border-bottom: 10px solid transparent;
-					font: 0/0 serif;
+				.b-friendstimes-aside P {
+					margin: 0 0 10px;
+					color: #768794;
 					}
+					.b-friendstimes-date {
+						margin: 0 7px;
+						color: #768794;
+						font-size: .9em;
+						}
+				.b-friendstimes-title {
+					color: #333;
+					font-size: 18px;
+					}
 			.b-friendstimes-section {
 				margin: 0;
-				padding: 20px;
-				-webkit-border-radius: 10px;
-				-moz-border-radius: 10px;
-				border-radius: 10px;
-				background: #C7E0F6;
 				}
 				.b-friendstimes-title {
 					margin: 0 0 0.5em;
 					padding: 0;
-					font-size: 1.5em;
+					/*font-size: 1.5em;*/
 					font-weight: normal;
 					}
 				.b-friendstimes-article {
 					margin: 0 0 0.5em;
 					padding: 0;
+					/*font-size: 14px;*/
 					}
 					.b-friendstimes-article IMG:not([width]):not([height]) {
 						max-width: 100%;
 						max-height: auto;
 						}
+				.b-friendstimes-article-links {
+					overflow: hidden;
+					line-height: 18px;
+					}
+				.b-friendstimes-share,
 				.b-friendstimes-nav {
+					float: left;
 					margin: 0;
 					padding: 0;
 					list-style: none;
 					}
+				.b-friendstimes-share {
+					float: right;
+					}
+					.b-friendstimes-share LI,
 					.b-friendstimes-nav LI {
 						display: inline;
+						color: #3F5F9E;
 						}
+				.b-friendstimes-comments {
+					background-color: #E3E9EE;
+					margin: 0 30px;
+					*margin-top: -3px;;
+					-webkit-border-radius: 0 0 10px 10px;
+					-moz-border-radius: 0 0 10px 10px;
+					border-radius: 0 0 10px 10px;
+					color: #666;
+					}
+					.b-friendstimes-comments-wrapper {
+						padding: 15px 30px;
+						border-bottom: 1px solid #ECF1F4;
+						}
+					.b-friendstimes-comments-wrapper:nth-child(odd) {
+						background-color: #ECF1F4;
+						color: #4F5A63;
+						}
+					.b-friendstimes-comments-wrapper:last-child {
+						border-bottom: none;
+						-webkit-border-radius: 0 0 10px 10px;
+						-moz-border-radius: 0 0 10px 10px;
+						border-radius: 0 0 10px 10px;
+						}
+						.b-friendstimes-comments-wrapper .ljuser {
+							margin: 0 7px 0 0;
+							}
+						.b-friendstimes-comments-date {
+							margin: 0 7px 0 0;
+							color: #768794;
+							font-size: .9em;
+							}
 .b-friendstimes-pages {
 	overflow: hidden;
 	margin: 0;
-	padding: 0;
+	padding: 0 0 24px;
 	list-style: none;
 	line-height: 1.3;
 	}
-	.b-friendstimes-pages-prev {
-		float: left;
+.lanzelot-content .b-friendstimes-pages {
+	padding-bottom: 0;
+	}
+	.b-friendstimes-pages-prev,
+	.b-friendstimes-pages-next {
 		margin: 0;
 		padding: 0;
+		background: url(/img/friendstimes-arrows.png) no-repeat 0 0;
 		}
+	.b-friendstimes-pages-prev {
+		float: left;
+		padding-left: 30px;
+		background-position: 0 -4px;
+		}
+	.b-friendstimes-pages-next {
+		float: right;
+		padding-right: 30px;
+		background-position: 100% -34px;
+		}
+		.b-friendstimes-pages-prev A,
+		.b-friendstimes-pages-next A {
+			font-size: 18px;
+			text-shadow: 0 1px 1px #FFF;
+			}
 		.b-friendstimes-pages-prev A:link,
 		.b-friendstimes-pages-prev A:visited,
 		.b-friendstimes-pages-prev A:hover,
-		.b-friendstimes-pages-prev A:active {
+		.b-friendstimes-pages-next A:link,
+		.b-friendstimes-pages-next A:visited,
+		.b-friendstimes-pages-next A:hover {
+			color: #333!important;
 			text-decoration: none;
-			border-bottom: 0;
 			}
-			.b-friendstimes-pages-prev A SPAN {
-				text-decoration: underline;
-				}
-			.lanzelot-content .b-friendstimes-pages-prev A:link SPAN,
-			.lanzelot-content .b-friendstimes-pages-prev A:visited SPAN {
-				text-decoration: none;
-				border-bottom: 1px solid #CCC;
-				}
-			.lanzelot-content .b-friendstimes-pages-prev A:hover SPAN,
-			.lanzelot-content .b-friendstimes-pages-prev A:active SPAN {
-				text-decoration: none;
-				border-bottom: 1px solid #3F5F9E;
-				}
-	.b-friendstimes-pages-next {
-		float: right;
-		margin: 0;
-		padding: 0;
-		}
+		.b-friendstimes-pages-prev A:hover,
+		.b-friendstimes-pages-next A:hover {
+			text-shadow: none;
+			border-bottom: none;
+			}