From: Marcel Werk <burntime@woltlab.com>
Date: Thu, 19 Apr 2012 19:26:40 +0000 (+0200)
Subject: Message sidebar overhaul
X-Git-Tag: 2.0.0_Beta_1~1149
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=16a821cd562443447b286d934554c0c9168bf5be;p=GitHub%2FWoltLab%2FWCF.git

Message sidebar overhaul
---

diff --git a/wcfsetup/install/files/style/button.less b/wcfsetup/install/files/style/button.less
index 356a24ace0..39a872bbac 100644
--- a/wcfsetup/install/files/style/button.less
+++ b/wcfsetup/install/files/style/button.less
@@ -28,7 +28,7 @@ button:not([disabled]) {
 	.boxShadow(0, 1px, rgba(0, 0, 0, .1), 3px);
 	.linearGradient(lighten(@wcfButtonBackgroundColor, 5%), lighten(@wcfButtonBackgroundColor, 10%), lighten(@wcfButtonBackgroundColor, 5%) 2px, @wcfButtonBackgroundColor);
 	.textShadow(@wcfButtonBackgroundColor);
-	.transition(~"background-color, background-image, border, box-shadow, color", .2s);
+	.transition(~"background-color, background-image, border, box-shadow, color", .1s);
 }
 
 /* primary */
@@ -59,7 +59,7 @@ button:not([disabled]):hover {
 	.textShadow(@wcfButtonHoverBackgroundColor);
 }
 
-/* active */
+/* active (pressed) */
 .button:active,
 input[type='reset']:not([disabled]):active,
 input[type='submit']:not([disabled]):active,
@@ -88,6 +88,21 @@ button:disabled {
 	.textShadow(@wcfButtonBackgroundColor);
 }
 
+/* active (permanently) */
+.button.active,
+input[type='button'].active,
+button.active,
+.button.active:hover,
+input[type='button'].active:hover,
+button.active:hover {
+	border-color: darken(@wcfButtonColor, 5%);
+	color: lighten(@wcfButtonBackgroundColor, 5%);
+	
+	.boxShadow(0, 1px, rgba(0, 0, 0, .1), 3px);	
+	.linearGradient(@wcfButtonColor, darken(@wcfButtonColor, 10%), @wcfButtonColor 3px);
+	.textShadow(darken(@wcfButtonColor, 10%));
+}
+
 
 /* button list */
 .buttonList {
diff --git a/wcfsetup/install/files/style/layout.less b/wcfsetup/install/files/style/layout.less
index 9c45c2c190..42143d744e 100644
--- a/wcfsetup/install/files/style/layout.less
+++ b/wcfsetup/install/files/style/layout.less
@@ -199,6 +199,28 @@ img {
 .icon256 { .icon(256px); }
 
 dl.dataList {
+	dt {
+		float: left;
+		overflow: hidden;
+		text-align: right;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		width: 35%;
+	}
+	
+	dd {
+		text-align: left;
+		margin-left: 38%;
+		
+		&:after {
+			display: table;
+			content: "";
+			clear: both;
+		}
+	}
+}
+
+dl.statsDataList {
 	display: block;
 	
 	dt {
@@ -210,7 +232,7 @@ dl.dataList {
 		overflow: hidden;
 		text-align: left;
 		white-space: nowrap;
-		width: 68%;
+		width: 62%;
 		
 		a {
 			color: @wcfDimmedColor;
@@ -227,7 +249,7 @@ dl.dataList {
 		text-align: right;
 		text-overflow: ellipsis;
 		white-space: nowrap;
-		width: 30%;
+		width: 35%;
 		
 		a {
 			color: @wcfColor;
diff --git a/wcfsetup/install/files/style/message.less b/wcfsetup/install/files/style/message.less
index e87506cfa0..d9bdf08773 100644
--- a/wcfsetup/install/files/style/message.less
+++ b/wcfsetup/install/files/style/message.less
@@ -67,22 +67,8 @@
 }
 
 .message.dividers {
-	.userAvatar,
-	.userRank,
-	.userCredits,
-	.userStatus {
-		border-bottom: 1px dotted darken(@wcfContainerBorderColor, 10%);
-	}
-	
-	.messageSidebar div:last-child {
-		border: 0;
-	}
-	
-	.messageSidebar > div {
-		> div,
-		> .messageHeader {
-			vertical-align: top;
-		}
+	.userCredits {
+		border-top: 1px dotted darken(@wcfContainerBorderColor, 10%);
 	}
 }
 
@@ -141,6 +127,10 @@
 	> *:last-child {
 		//padding-bottom: @wcfGapMedium;
 	}
+	
+	> footer {
+		padding-bottom: @wcfGapMedium;
+	}
 }
 
 .message .messageContent {
@@ -203,6 +193,7 @@
 	
 	.userTitle {
 		/* todo */
+		margin: 7px 0 0;
 	}
 	
 	.userRank {
@@ -211,59 +202,38 @@
 	}
 	
 	.userAvatar {
-		display: block;
+		display: inline-block;
 		margin: @wcfGapSmall 0 0;
-		padding: 0 0 @wcfGapSmall;
 	}
 	
 	.userCredits {
-		color: @wcfLinkColor;
-		display: block;
-		margin: @wcfGapSmall 0 0;
-		padding: 0 0 @wcfGapSmall;
-	}
-	
-	.userStatus,
-	.userContacts {
-		color: @wcfLinkColor;
 		font-size: @wcfSmallFontSize;
-		display: block;
 		margin: @wcfGapSmall 0 0;
-		padding: 0 0 @wcfGapSmall;
-	}
-	
-	.userStatus ul,
-	.userContact ul {
-		list-style-type: none;
+		padding: @wcfGapSmall 0 0;
 		
-		li {
-			display: inline;
+		.dataList {
+			dt {
+				width: 47%;
+			}
 			
-			a {
-				display: inline-block;
-				margin: 0 -3px;
-				padding: 1px 3px 0;
-				text-align: left;
-				text-decoration: none;
-				
-				.transition(background-color, .2s);
-				
-				&:hover {
-					background-color: @wcfContainerBorderColor;
-					
-					.borderRadius(7px);
-					.boxShadow(0, 1px, #eee, 7px);
-				}
-				
-				span {
-					display: block;
-					left: -9000px;
-					position: absolute;
-					top: -9000px;
-				}
+			dd {
+				margin-left: 50%;
 			}
 		}
 	}
+	
+	&.online {
+		.userAvatar {
+			.boxShadow(0, 0, @wcfSuccessBackgroundColor, 10px);
+			
+			/* todo */
+			-webkit-animation-name: onlineStatus;
+			-webkit-animation-duration: 2s;
+			-webkit-animation-iteration-count: infinite;
+			-webkit-animation-direction: alternate;
+			-webkit-animation-timing-function: ease-in-out;
+		}
+	}
 }
 
 .message {
@@ -298,4 +268,14 @@ li:nth-child(2n+1) .message {
 /*todo: move*/
 .highlight {
 	background-color: rgba(255, 200, 0, 1);
-}
\ No newline at end of file
+}
+
+/* todo */
+@-webkit-keyframes onlineStatus {
+	0% {
+		-webkit-box-shadow: 0 0 10px @wcfSuccessBackgroundColor;
+	}
+	100% {
+		-webkit-box-shadow: 0 0 20px @wcfSuccessBackgroundColor;
+	}
+} 
\ No newline at end of file