From 2c623ed67782db0ae6fbddbdf25963d5957ce567 Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Wed, 3 Feb 2016 16:57:21 +0100
Subject: [PATCH] Style overhaul (WIP)

* new contentHeaderMetaData element
* added some missing transitions
* some minor tweaks
---
 .../files/style/layout/containerList.scss     |  2 +
 .../install/files/style/layout/content.scss   | 48 ++++++++++---------
 wcfsetup/install/files/style/ui/label.scss    | 38 +++++++--------
 wcfsetup/install/files/style/ui/message.scss  | 22 ++++++---
 .../install/files/style/ui/tabularBox.scss    |  1 +
 5 files changed, 60 insertions(+), 51 deletions(-)

diff --git a/wcfsetup/install/files/style/layout/containerList.scss b/wcfsetup/install/files/style/layout/containerList.scss
index 196545db6d..09e9807640 100644
--- a/wcfsetup/install/files/style/layout/containerList.scss
+++ b/wcfsetup/install/files/style/layout/containerList.scss
@@ -1,6 +1,7 @@
 .containerList > li {
 	padding: 20px;
 	position: relative;
+	transition: background-color .2s;
 	
 	&:not(:last-child) {
 		border-bottom: 1px solid $wcfContentBorderInner;
@@ -42,6 +43,7 @@
 		position: absolute;
 		right: 20px;
 		top: 18px;
+		transition: opacity .2s;
 		
 		> ul {
 			background-color: $wcfContentBackground;
diff --git a/wcfsetup/install/files/style/layout/content.scss b/wcfsetup/install/files/style/layout/content.scss
index abaf4a80c3..79f4ef721e 100644
--- a/wcfsetup/install/files/style/layout/content.scss
+++ b/wcfsetup/install/files/style/layout/content.scss
@@ -21,6 +21,32 @@
 			color: $wcfContentHeadlineLinkActive; // todo: rename variable
 		}
 	}
+	
+	.contentHeaderMetaData {
+		color: $wcfContentDimmedText;
+		
+		&.inlineList {
+			> li:not(:last-child) {
+				margin-right: 10px;
+			}
+			
+			.labelList {
+				display: inline-flex;
+				
+				.label {
+					top: -1px;
+				}
+			}
+		}
+		
+		> li {
+			a,
+			a:hover,
+			.icon {
+				color: $wcfContentDimmedText;
+			}
+		}
+	}
 }
 
 /* legacy styling for sub headlines (deprecated; use .section > .sectionTitle instead) */
@@ -47,28 +73,6 @@
 	}
 }
 
-/* todo
-.boxHeadline {
-	&.labeledHeadline {
-		font-size: 0;
-		
-		> h1,
-		> h2 {
-			display: inline-block;
-			margin-right: 10px;
-		}
-		
-		> ul {
-			display: inline-block;
-			font-size: 1rem;
-			
-			&:not(:empty) {
-				margin-right: 10px;
-			}
-		}
-	}
-}*/
-
 /* content sections */
 .section {
 	margin-top: 30px;	
diff --git a/wcfsetup/install/files/style/ui/label.scss b/wcfsetup/install/files/style/ui/label.scss
index c7b390411b..333e1d127a 100644
--- a/wcfsetup/install/files/style/ui/label.scss
+++ b/wcfsetup/install/files/style/ui/label.scss
@@ -2,32 +2,26 @@
 /* label list */
 .labelList {
 	@extend .inlineList;
-}
-
-.boxHeadline.labeledHeadline {
-	align-items: center;
-	
-	@extend .inlineList;
-	
-	> .statusIcons,
-	> .labelList {
-		flex: 0 0 auto;
-	}
 	
-	> .statusIcons:not(:last-child) {
-		margin-right: 10px;
+	> li {
+		&:not(:first-child) {
+			.label {
+				border-top-left-radius: 0;
+				border-bottom-left-radius: 0;
+			}
+		}
+		
+		&:not(:last-child) {
+			margin-right: 1px;
+			
+			.label {
+				border-top-right-radius: 0;
+				border-bottom-right-radius: 0;
+			}
+		}
 	}
 }
 
-.boxHeadline.labeledHeadline > h1,
-.boxSubHeadline.labeledHeadline > h2 {
-	flex: 0 0 auto;
-	margin-right: 10px;
-	
-	/* force a long running title to break instead of overflowing the container */
-	max-width: 100%;
-}
-
 /* ACP label list */
 #labelList > li {
 	flex-basis: 30%;
diff --git a/wcfsetup/install/files/style/ui/message.scss b/wcfsetup/install/files/style/ui/message.scss
index 3c6e8595ac..4dc6623175 100644
--- a/wcfsetup/install/files/style/ui/message.scss
+++ b/wcfsetup/install/files/style/ui/message.scss
@@ -366,7 +366,7 @@
 		&::before {
 			display: block;
 			font-family: FontAwesome;
-			font-size: 48px;
+			font-size: 42px;
 			position: absolute;
 		}
 		
@@ -378,15 +378,15 @@
 	.messageDeleted .columnAvatar::before {
 		color: rgb(180, 0, 0);
 		content: $fa-var-trash-o;
-		left: 15px;
-		top: -7px;
+		left: 17px;
+		top: -2px;
 	}
 	
 	.messageDisabled .columnAvatar::before {
 		color: rgb(0, 140, 0);
 		content: $fa-var-eye-slash;
-		left: 10px;
-		top: -6px;
+		left: 13px;
+		top: -2px;
 	}
 	
 	.columnAvatar {
@@ -397,6 +397,7 @@
 			
 			> p > img {
 				opacity: .6;
+				transition: opacity .2s;
 			}
 		}
 		
@@ -404,8 +405,13 @@
 			position: absolute;
 			width: 24px;
 			height: 24px;
-			bottom: -8px;
-			right: -8px;
+			bottom: -2px;
+			right: -6px;
+			
+			> img {
+				border: 1px solid $wcfContentBackground;
+				box-sizing: content-box;
+			}
 		}
 	}
 	
@@ -434,6 +440,7 @@
 			display: flex;
 			float: right;
 			opacity: .6;
+			transition: opacity .2s;
 			
 			> .statusIcons {
 				align-items: center;
@@ -533,6 +540,7 @@
 	.pagination {
 		flex: 0 0 auto;
 		opacity: 0;
+		transition: opacity .2s;
 		
 		@extend .wcfFontSmall;
 		
diff --git a/wcfsetup/install/files/style/ui/tabularBox.scss b/wcfsetup/install/files/style/ui/tabularBox.scss
index 8de3059e2e..266e1073da 100644
--- a/wcfsetup/install/files/style/ui/tabularBox.scss
+++ b/wcfsetup/install/files/style/ui/tabularBox.scss
@@ -11,6 +11,7 @@
 .tabularListRow {
 	flex: 0 0 auto;
 	padding: 5px 0;
+	transition: background-color .2s;
 	
 	&.divider + li:not(.divider) {
 		border-top-color: $wcfContentBorder;
-- 
2.20.1