From: Alexander Ebert <ebert@woltlab.com>
Date: Thu, 29 Jan 2015 10:54:18 +0000 (+0100)
Subject: Fixed and improved borders in editor toolbar
X-Git-Tag: 2.1.0_Beta_4~37
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=348f38de8cda7f577babf3ba0f9176f00042bd49;p=GitHub%2FWoltLab%2FWCF.git

Fixed and improved borders in editor toolbar

Using linear gradient with pixel-based color stops is awful since the browser will draw a gradient instead of a sharp border. To avoid this, one can simply set the background-size in pixels and then use percentage values, resulting in sharp borders where wanted and a smooth gradient on top.
---

diff --git a/wcfsetup/install/files/style/redactor.less b/wcfsetup/install/files/style/redactor.less
index 0d9138e8db..bdc6629a97 100644
--- a/wcfsetup/install/files/style/redactor.less
+++ b/wcfsetup/install/files/style/redactor.less
@@ -227,12 +227,12 @@
 }
 
 .redactor-toolbar {
-	background: repeating-linear-gradient(0deg, @wcfContainerBackgroundColor, @wcfContainerAccentBackgroundColor 29px, @wcfContainerBorderColor 30px, @wcfContainerBorderColor 30px);
-	border-bottom: 1px solid @wcfContainerBorderColor;
-	margin-top: -1px;
+	background: repeating-linear-gradient(0deg, @wcfContainerBorderColor 0px, @wcfContainerBorderColor 3%, @wcfContainerBackgroundColor 3%, @wcfContainerAccentBackgroundColor 100%);
+	background-size: 100% 31px;
 	
 	> li {
 		display: inline-block;
+		margin-bottom: 1px;
 		vertical-align: middle;
 		
 		&:last-of-type,