Максим Червонный (fiskus_boulder) wrote in changelog,
Максим Червонный
fiskus_boulder
changelog

[ljcom] r10788: LJSUP-9126: FriendsTimes, hidden comment...

Committer: mchervonniy
LJSUP-9126: FriendsTimes, hidden comments and filter widget? markup and styles
U   trunk/htdocs/stc/friendstimes.css
Modified: trunk/htdocs/stc/friendstimes.css
===================================================================
--- trunk/htdocs/stc/friendstimes.css	2011-08-02 10:21:52 UTC (rev 10787)
+++ trunk/htdocs/stc/friendstimes.css	2011-08-02 10:24:56 UTC (rev 10788)
@@ -126,7 +126,8 @@
 					}
 					.b-friendstimes-comments-wrapper {
 						padding: 15px 30px;
-						overflow: hidden;
+						position: relative;
+						/*overflow: hidden;*/
 						border-bottom: 1px solid #ECF1F4;
 						}
 					.b-friendstimes-comments-wrapper:nth-child(odd) {
@@ -142,6 +143,7 @@
 					.b-friendstimes-child {
 						background:url(/img/friendstimes/reply.png) no-repeat 0 0;
 						padding-left:20px;
+						position:relative;
 						}
 						.b-friendstimes-comments-wrapper .ljuser {
 							margin: 0 7px 0 0;
@@ -151,6 +153,41 @@
 							color: #768794;
 							font-size: .9em;
 							}
+						.b-friendstimes-close-dialog {
+							display:none;
+							position:absolute;
+							padding:0 30px;
+							top:0;
+							left:0;
+							right:0;
+							border-top:1px solid #C5CFD7;
+							-webkit-border-radius:0 0 6px 6px;
+							-moz-border-radius:0 0 6px 6px;
+							border-radius:0 0 6px 6px;
+							box-shadow:0 3px 3px #999;
+							background: #fefeff;
+							background: -moz-linear-gradient(top, #fefeff 0%, #f1f5f7 3%, #e5e9eb 97%, #ffffff 100%);
+							background: -webkit-gradient(linear, top top, right top, color-stop(0%,#fefeff), color-stop(3%,#f1f5f7), color-stop(97%,#e5e9eb), color-stop(100%,#ffffff));
+							background: -webkit-linear-gradient(top, #fefeff 0%,#f1f5f7 3%,#e5e9eb 97%,#ffffff 100%);
+							background: -o-linear-gradient(top, #fefeff 0%,#f1f5f7 3%,#e5e9eb 97%,#ffffff 100%);
+							background: -ms-linear-gradient(top, #fefeff 0%,#f1f5f7 3%,#e5e9eb 97%,#ffffff 100%);
+							background: linear-gradient(top, #fefeff 0%,#f1f5f7 3%,#e5e9eb 97%,#ffffff 100%);
+							filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefeff', endColorstr='#ffffff',GradientType=1 );
+							z-index:1;
+							}
+						.b-friendstimes-apply {
+							vertical-align:middle;
+							margin:0 0 0 5px;
+							}
+						.b-friendstimes-child .b-friendstimes-close-dialog {
+							left:-30px;
+							right:-30px;
+							}
+							.b-friendstimes-cancel {
+								/*float:right;*/
+								position:absolute;
+								right:30px;
+								}
 .b-friendstimes-pages {
 	overflow: hidden;
 	margin: 0;
@@ -235,12 +272,8 @@
 
 .b-friendstimes-f5 {
 	display: none;
-	position: fixed;
-	top: 50%;
-	right: 0;
 	width: auto;
 	height: auto;
-	margin: -40px 0 0;
 	padding: 0;
 	border: 1px solid #FFF;
 	border-width: 1px 0 1px 1px;
@@ -259,7 +292,7 @@
 	.b-friendstimes-f5 A:active {
 		display: block;
 		margin: 0;
-		padding: 28px 12px;
+		padding: 10px 12px;
 		border: 0;
 		-moz-border-radius-topleft: 11px;
 		-moz-border-radius-bottomleft: 11px;
@@ -311,15 +344,6 @@
 	display: none !important;
 	}
 
-.b-friendstimes-hidden-comments {
-	position:absolute;
-	top:24px;
-	right:-27px;
-	}
-.b-friendstimes-hidden-comments-inactive {
-	width:48px;
-	overflow:hidden;
-	}
 .b-friendstimes-toolbar {
 	position:relative;
 	border: 1px solid #FFF;
@@ -330,6 +354,7 @@
 	-moz-box-shadow: -1px 1px 2px rgba(0,0,0,.5);
 	box-shadow: -1px 1px 2px rgba(0,0,0,.5);
 	}
+	.b-friendstimes-filter-icon,
 	.b-friendstimes-hidden-comments-icon {
 		position:absolute;
 		background:url(/img/friendstimes/settings.png) no-repeat 0 0;
@@ -339,33 +364,40 @@
 		height:27px;
 		cursor:pointer;
 		}
-	.b-friendstimes-toolbar H3 {
+	.b-friendstimes-filter-icon {
+		height:23px;
+		top:16px;
+		width:24px;
+		background:url(/img/friendstimes/filter.png) no-repeat 0 0;
+		}
+	/*.w-friendstimes-opened .b-friendstimes-filter-icon {
+		background-position:0 -23px;
+		}*/
+	.b-friendstimes-toolbar-title {
 		margin:0;
 		font-weight:bold;
 		font-size:12px;
 		color:#222;
 		font-style:normal;
-		padding:20px 78px 20px 56px;
+		padding:20px 78px 18px 56px;
 		white-space:nowrap;
-		}
-
-
-	.b-friendstimes-toolbar H3 {
 		-moz-border-radius:11px 0 0 11px;
 		border-radius:11px 0 0 11px;
 
-
-
-		background: #e3e9ee; /* Old browsers */
-		background: -moz-linear-gradient(top, #e3e9ee 0%, #ccd2d6 100%); /* FF3.6+ */
-		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e3e9ee), color-stop(100%,#ccd2d6)); /* Chrome,Safari4+ */
-		background: -webkit-linear-gradient(top, #e3e9ee 0%,#ccd2d6 100%); /* Chrome10+,Safari5.1+ */
-		background: -o-linear-gradient(top, #e3e9ee 0%,#ccd2d6 100%); /* Opera11.10+ */
-		background: -ms-linear-gradient(top, #e3e9ee 0%,#ccd2d6 100%); /* IE10+ */
-		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e3e9ee', endColorstr='#ccd2d6',GradientType=0 ); /* IE6-9 */
-		background: linear-gradient(top, #e3e9ee 0%,#ccd2d6 100%); /* W3C */
+		background: #e3e9ee;
+		background: -moz-linear-gradient(top, #e3e9ee 0%, #ccd2d6 100%);
+		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e3e9ee), color-stop(100%,#ccd2d6));
+		background: -webkit-linear-gradient(top, #e3e9ee 0%,#ccd2d6 100%);
+		background: -o-linear-gradient(top, #e3e9ee 0%,#ccd2d6 100%);
+		background: -ms-linear-gradient(top, #e3e9ee 0%,#ccd2d6 100%);
+		background: linear-gradient(top, #e3e9ee 0%,#ccd2d6 100%);
+		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e3e9ee', endColorstr='#ccd2d6',GradientType=0 );
 		text-shadow: 0px 1px 0 #FFF;
 		}
+	.b-friendstimes-toolbar-title {
+		padding-right:128px;
+		}
+	.b-friendstimes-filter-list,
 	.b-friendstimes-hidden-comments-list {
 		margin:0 0 0 50px;
 		-moz-border-radius:0 0 0 11px;
@@ -379,6 +411,7 @@
 		-moz-box-shadow: -1px 3px 2px rgba(0,0,0,.5);
 		box-shadow: -1px 3px 2px rgba(0,0,0,.5);
 		}
+	.b-friendstimes-filter-list UL,
 	.b-friendstimes-hidden-comments-list UL {
 		text-shadow: 0px 1px 0 #FFF;
 		-moz-border-radius:0 0 0 11px;
@@ -387,21 +420,34 @@
 		margin:0;
 		padding:6px;
 		border-top-width:0;
-		-moz-border-radius:0 0 11px 11px;
-		border-radius:0 0 11px 11px;
+		-moz-border-radius:0 0 0 11px;
+		border-radius:0 0 0 11px;
 		}
+	.b-friendstimes-filter-list LI,
 	.b-friendstimes-hidden-comments-list LI {
 		padding:9px;
 		list-style:none;
 		-moz-border-radius:4px;
 		border-radius:4px;
+		position:relative;
+		cursor:pointer;
 		}
+	.b-friendstimes-filter-list LI {
+		padding:5px 9px;
+		}
 	.b-friendstimes-hidden-comments-list LI:nth-child(2n+1) {
 		background-color:#D8DEE2;
 		}
 	.b-friendstimes-hidden-comments-list LI:hover {
 		background-color:#FFF;
 		}
+	.b-friendstimes-filter-list LI:hover {
+		background-color:#D8DEE2;
+		}
+	.b-friendstimes-filter-list A,
+	.b-friendstimes-filter-list A:link,
+	.b-friendstimes-filter-list A:visited,
+	.b-friendstimes-filter-list A:hover,
 	.b-friendstimes-hidden-comments-list A,
 	.b-friendstimes-hidden-comments-list A:link,
 	.b-friendstimes-hidden-comments-list A:visited,
@@ -411,10 +457,24 @@
 	.b-friendstimes-close {
 		width:12px;
 		height:13px;
-		float:right;
+		/*float:right;*/
+		position:absolute;
+		right:15px;
 		background:url(/img/friendstimes/close.png);
 		cursor:pointer;
+		margin:4px 0 0;
 		}
+	.b-friendstimes-comments-wrapper .b-friendstimes-close {
+		display:none;
+		margin:12px 0 0;
+		}
+	.b-friendstimes-child .b-friendstimes-close {
+		margin:4px 0 0;
+		right:-15px;
+		}
+	.b-friendstimes-comments-wrapper:hover .b-friendstimes-close {
+		display:block;
+		}
 	.b-friendstimes-toobar-paginator {
 		position:absolute;
 		right:0;
@@ -449,3 +509,53 @@
 		background-position:-12px -19px;
 		}
 
+/* Widgets' positioning */
+.w-friendstimes {
+	position:absolute;
+	right:-27px;
+	overflow:hidden;
+	z-index:1;
+	}
+.b-friendstimes-f5 {
+	top:24px;
+	}
+.b-friendstimes-hidden-comments {
+	top:90px;
+	}
+.b-friendstimes-filter {
+	top:153px;
+	}
+	.w-friendstimes-inner {
+		position:relative;
+		left:100%;
+		margin-left:-47px;
+		-webkit-transition: all .5s;
+		-moz-transition: all .5s;
+		-o-transition: all .5s;
+		transition: all .5s;
+		}
+.w-friendstimes-opened {
+	/*overflow:visible;*//* OMG hasLayout crashed transition in Firefox */
+	z-index:10;
+	}
+	.w-friendstimes-opened .w-friendstimes-inner {
+		left:0;
+		margin-left:0;
+		padding:0 0 2px 20px; /* it's for shadow */
+		}
+
+/* Widgets' scrolling */
+.b-friendstimes-scrolled .w-friendstimes {
+	position:fixed;
+	right:0;
+	}
+.b-friendstimes-scrolled .b-friendstimes-f5 {
+	top: 10px;
+	}
+.b-friendstimes-scrolled .b-friendstimes-hidden-comments {
+	top:74px;
+	}
+.b-friendstimes-scrolled .b-friendstimes-filter {
+	top:138px;
+	}
+

Tags: css, fiskus_boulder, ljcom
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 0 comments