From a1ccf90ce68e504070bc745ceb36b5fe4853d8b1 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Sun, 10 Jan 2016 13:32:27 +0100
Subject: [PATCH] Improved visuals for marked, deleted and disabled

---
 .../install/files/style/layout/global.scss    |  7 +-
 wcfsetup/install/files/style/ui/message.scss  | 68 +++++++++++++++++++
 2 files changed, 74 insertions(+), 1 deletion(-)

diff --git a/wcfsetup/install/files/style/layout/global.scss b/wcfsetup/install/files/style/layout/global.scss
index ac2ebf4ee3..b6c2535a09 100644
--- a/wcfsetup/install/files/style/layout/global.scss
+++ b/wcfsetup/install/files/style/layout/global.scss
@@ -76,7 +76,12 @@
 
 .wcfFontHeadline {
 	font-size: $wcfFontSizeHeadline;
-	font-weight: 300;
+	font-weight: 400;
+}
+
+.wcfFontSection {
+	font-size: $wcfFontSizeSection;
+	font-weight: 400;
 }
 
 .wcfFontTitle {
diff --git a/wcfsetup/install/files/style/ui/message.scss b/wcfsetup/install/files/style/ui/message.scss
index fdf29c0c81..86aeb5d9ad 100644
--- a/wcfsetup/install/files/style/ui/message.scss
+++ b/wcfsetup/install/files/style/ui/message.scss
@@ -246,6 +246,74 @@
 		}
 	}
 	
+	.columnMark > label {
+		cursor: pointer;
+		display: block;
+		height: 24px;
+		width: 24px;
+		
+		&::before {
+			content: $fa-var-square-o;
+			font-family: FontAwesome;
+			font-size: 24px;
+			position: relative;
+			top: -6px;
+		}
+		
+		> input {
+			display: none;
+		}
+	}
+	
+	.jsMarked .columnMark > label{
+		position: relative;
+		
+		&::after {
+			color: rgb(0, 150, 0);
+			content: $fa-var-check;
+			font-family: FontAwesome;
+			font-size: 13px;
+			left: 3px;
+			position: absolute;
+			top: 1px;
+		}
+	}
+	
+	.tabularListRowHead .columnMark > label::before {
+		top: -3px;
+	}
+	
+	
+	.messageDeleted .columnAvatar,
+	.messageDisabled .columnAvatar {
+		position: relative;
+		
+		&::before {
+			display: block;
+			font-family: FontAwesome;
+			font-size: 48px;
+			position: absolute;
+		}
+		
+		> div {
+			visibility: hidden;
+		}
+	}
+	
+	.messageDeleted .columnAvatar::before {
+		color: rgb(180, 0, 0);
+		content: $fa-var-trash-o;
+		left: 15px;
+		top: -7px;
+	}
+	
+	.messageDisabled .columnAvatar::before {
+		color: rgb(0, 140, 0);
+		content: $fa-var-play-circle-o;
+		left: 12px;
+		top: -3px;
+	}
+	
 	.columnAvatar {
 		div {
 			position: relative;
-- 
2.20.1